{

Angular - How to add Read more/less button/link with example


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

It is a sample example read more buttons or links with Angular9/10/11 version.

When you have a long text paragraph displayed on the HTML page, you need to truncate the paragraph with a 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 with reading more/less link example in Angular application
paragraph text is 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 the controller, declare isReadMore boolean value in typescript code with a 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 an 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 a 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 with reading more/less link example in Angular application paragraph text shown here continue THis is long text replaced with read more/less link example in Angular application paragraph text shown here continue continue
    This is long text replaced with reading more/less link example in Angular application paragraph text shown here continue THis is long text replaced with read more/less link example in Angular application paragraph text shown here continue
    continue THis is long text replaced with reading more/less link example in Angular application paragraph text shown here continue THis is long text replaced with 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 limiting long text with show more button links 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 a button (Read More)

Complete example code HTML template contains the logic for dynamically limiting 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 a 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 containseverall words continued. An example for implementingdynamicallyy limit long text`;
}

here is the output Angular Dynamically shortened long text with Show more link example

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.