Angular - How to add Read more/less button/link with example | Dynamically Shorten long text with show more


In this tutorial, we are going to explain about read more or less link in Angular with example.

This is sample example read more button or link with Angular9/10/11 version

When you have long text paragraph displayed on html page, you need to truncate the paragraph with read more/less link

Multiple ways of long text can be truncated with height or limiting the text

For example, if you have long text displayed as shown below

<div>
THis is long text replaced w ith read more/less link example in Angular application
paragraph text shown here
</div>

Here are the steps to implement

  • Added ngClass directive to long text div, ngClass directive allows you to add css class dynamically based on angular expressions.
  • In controller, declare isReadMore boolean value in typescript code with true default value
  • Added button class, with click event method (showText) attached, and button text is conditional expression based on isReadMore value- ie Read More/Less
  • In showText, assign with inverse value of isReadMore
  • In component css, added limitTextHeight which limits div height to 20px and overflow:hidden.

The following example clicks on button, limits long text with height to 20px.

Here is complete example code

Html template code - app.component.html

<h1>
    Angular Read More| Read less button link example</h1>

<div [ngClass]="{'limitTextHeight': isReadMore}">

    THis is long text replaced w ith read more/less link example in Angular application paragraph text shown here continue continue THis is long text replaced w ith read more/less link example in Angular application paragraph text shown here continue continue
    THis is long text replaced w ith read more/less link example in Angular application paragraph text shown here continue continue THis is long text replaced w ith read more/less link example in Angular application paragraph text shown here continue
    continue THis is long text replaced w ith read more/less link example in Angular application paragraph text shown here continue continue THis is long text replaced w ith read more/less link example in Angular application paragraph text shown here
    continue continue
</div>
<button type="button" (click)="showText()">
    {{ isReadMore ? 'Read More': 'Read Less' }}
  </button>

App.component.ts

import { Component, } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  isReadMore = true

  showText() {
     this.isReadMore = !this.isReadMore
  }
 
}

App.component.scss

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

here is the output

Angular Read More/less button of a long text example

Shortened long text with show more button

This example talks about limit long text with with show more button link on angular pages.

For example, long text displayed as follows

an example for shortened long text with button link
Adding link to the button

And output expected is

an example for shortened long text with button (Read More)

Complete example code html template contains th logic for dynamically limit the long text with short text and Read More link.

  • Div is defined with displayed long text
  • long text is limited to 50 characters
  • based on boolean value added Read More link using ngIf directive and click event
<div>
    {{(readMore) ? longText : longText | slice:0:50}} <span *ngIf="!readMore">...</span>
    <a href="javascript:;" *ngIf="!readMore" (click)="readMore=true">[Read More]</a>
</div>

Controller code is

  • Declared readMore boolean in the typescript code with default true value
  • And also long text is defined with an variable
import { Component, } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  readMore = false;
  longText = `This is long paragraph text contain sevaral words continued. An example for implementing dyanmically limit long text`;
}

here is the output

Angular Dynamically shortened long text with Show more link example

Please subscribe or comment for a any new questions and new posts.

Similar Posts