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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay