Angular Read more/less button Dynamic Shorten long text

In this lesson, we will explain a link to more or less reading in Angular for example.

This is an example of an example read more button or link with the Angular9 / 10/11/12 version. Read more/less button Dynamic Shorten long text.

If you have a long text feature shown on the html page, you need to narrow the section with a read / overlap link

Many long text modes can be reduced in length or limit text, Read more/less button Dynamic Shorten long text

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

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

implement Read more or less button link with size height

Here are the steps you should take

1. Added ngClass orientation to long div text, ngClass orientation allows you to add a strong css class based on angular expressions.
2. In the controller, announce the ReadMore value boolean code in TypeScript code with the default default value
3. Added button category, there is an event click button (showText) attached, and button text conditional statement based on isReadMore value- ie Learn More / Less
4. In showText, provide the opposite value of isReadMore
5. In css item, a TextHeight limit is added that limits div height to 20px and overflow: hidden.

The following example clicks a button, limiting text length and 20px height.

Here is the complete example code

Html template code – app.component.html

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

<p [ngClass]="{'limitTextHeight': isReadMore}" [innerHTML]="text">
						</p>
<button type="button" (click)="isReadMore=!isReadMore">
    {{ 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 {

  public isReadMore:boolean = true;
  text = `Located within 322 m of Central Park and Columbus
        Circle metro station, this boutique hotel features
        an interior lobby garden with trees and ivy walls.
        Guests can enjoy convenience of concierge services
        and a fitness center.<br /><br />Guests can relax
	with a game of billiards, or catch up with family
	and friends on business center computers
	<br /><br />
	The Hudson New York is located 0.7 mi from Times
	Square. The Museum of Modern Art is 0.8 mi away. For
	those who would like to enjoy a concert during their
	visit to New York, Lincoln Center and Carnegie Hall
	are 645 m from the property.
	<br /><br />
	Located within 322 m of Central Park and Columbus
	Circle metro station, this boutique hotel features
	an interior lobby garden with trees and ivy walls.
	Guests can enjoy convenience of concierge services
	and a fitness center.<br /><br />Guests can relax
	with a game of billiards, or catch up with family
	and friends on business center computers`,
}

App.component.scss

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

Shortened long text with show more button

This example speaks of a long text limit with a button link above the angular pages.

For example, long text is shown as follows

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

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

The full html template template contains a logic to reduce long text with short text and a link to learn more.

• Div is defined by the long text shown
• long text is limited to 50 characters
• based on additional boolean value Read more link using ngIf direction 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

• An additional boolean in the TypeScript code with the default true value
• And the long text is explained differently

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’s the output

Hope clear Read more/less button Dynamic Shorten long text concept….

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

Follow other articles

• TEMPLATE DRIVEN FORMS
• ANGULAR REACTIVE FORM VALIDATION EXAMPLE
• AUTOFOCUS ANGULAR FORM ON SUBMIT
• ANGULAR SUBMIT A FORM PROGRAMMATICALLY

Thank you! please don’t forget to like our Facebook page to get more interesting updates.