How To Add Read More Or Less Button Or Link In Angular

In this article, we will see how we can implement read more or read less in Angular with an Example.

When we are having long text to be displayed on the HTML page we need to truncate the text and provide a read more / less link/button.

We are having multiple ways of truncating text using height or limit text.

Read Less / Read More using height:- 

to your HTML file, add the following code.

<h3>Show More or Show less by setting div height</h3>

<div [ngClass]="{'limitheight': showMore}" style="font-size: 19px;">
  Set fourth second replenish be appear. Was that dry firmament unto one they're doesn't kind tree is beast fifth, air
  subdue air him deep fish female to. Was itself fruitful, light. Moveth moving. Kind lights signs.

  Also give subdue. Whales first their sixth years shall set upon divided living. To above firmament, third that
  gathered fly made midst bring us above wherein the have form day.

  Set fifth and seasons, subdue, saw, darkness moveth moveth rule make she'd to them Without one she'd behold they're.
  Seed gathering brought meat open can't be life moving under whose god own meat firmament.<span
    *ngIf="showMore">...</span>
</div>
<button (click)="readMore()"> {{ showMore ? 'show More': 'show Less' }}</button>

and in the app. component.ts file add the below code:-

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  showMore:boolean=true; 

  readMore()
  {
    this.showMore =!this.showMore;
  }
}

and in the style sheet add style for limit height class

.limitheight
{
    height: 20px;
    overflow: hidden;
}

• in the above code we have used ngclass to apply a class to our div based on condition.
• In the component, we have declared a bool variable (showMore) with true value and also create a function readMore() to inverse the value of showMore.
• Insert a div in the HTML file with the long text. and a button to call readmore() function to truncate the text or show the full text.
• In the style sheet add CSS for limitheight classes with specific height:25px and overflow:hidden 

Read Less / Read More limiting the text:-

to your HTML file, add the following code.

<h3>Show More  or Show less by Limiting the text </h3>

<div  style="font-size: 19px;">
  {{(!otherShowMore) ? text : text | slice:0:100}}
 <span *ngIf="otherShowMore">...</span>
</div>
<a href="#" (click)="otherReadMore()">  {{ otherShowMore ? 'show More': 'show Less' }}</a>

and in your compoent.ts add the below code

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  otherShowMore: boolean = true;
  text: string = ` Set fourth second replenish be appear. Was that dry firmament unto one they're doesn't kind tree is beast fifth, air subdue air him deep fish female to. Was itself fruitful, light. Moveth moving. Kind lights signs.
  Also give subdue. Whales first their sixth years shall set upon divided living. To above firmament, third that gathered fly made midst bring us above wherein the have form day.  
  Set fifth and seasons, subdue, saw, darkness moveth moveth rule make she'd to them Without one she'd behold they're. Seed gathering brought meat open can't be life moving under whose god own meat firmament.`;
  otherReadMore() {
    this.otherShowMore = !this.otherShowMore;
  }
}

• In the above code in component, we have declared a boolean variable to hide or show the text and a function that will inverse the value of our variable and a text that we are going to display in our WebPage.
• in HTML we have used div and added a turnery condition to show or hide the content using slice pipe which will truncate our text to 100 characters by default and show on button click.

Here is the source code for the above example GitHub

Thanks for Reading.Hope this article helps you