DEV Community

Cover image for How to show less content in Angular
Vic-rider
Vic-rider

Posted on

1

How to show less content in Angular

Made by @Vic-rider

NgxLessTextPipe

This pipe is created to help show less content like emails, descriptions, details.

Install

Run npm i ngx-less-text-pipe to install it.

Import

Navigate to the module or standalone component in which you want to use.


import { NgxLessTextModule } from "ngx-less-text-pipe";

@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    NgxLessTextModule
  ],
  providers: [],
})
export class ProductsModule { }

Enter fullscreen mode Exit fullscreen mode

Use

You have to go to your template where you want to use lessText pipe.

<p> {{ product.description | lessText:'100' }} </p>
Enter fullscreen mode Exit fullscreen mode

Here, 100 represents the number of characters you want to display.

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay