Skip to main content

Posts

Showing posts from October, 2019

How to create custom Pipe in Angular

Pipe is a building block in Angular. We use pipe to format data in Angular. We have got some build-in pipes like Uppercase, Lowercase, Decimal, Currency, Percent. We will learn How to create custom Pipe in Angular in this post. Before going to create custom pipe let’s get some example of build-in pipes using interpolation. Uppercase:  {{ “this is text” | uppercase }} => THIS IS TEXT Lowercase:  {{ “THIS IS TEXT” | lowercase }} => this is text Decimal:  {{ 4.0546 | number:’1.2-2′ }} => 4.06 Currency:  {{ 160.26 | currency }} => USD160.26 Date:  {{ new Date(2019, 9, 5) | date:’shortDate’ }} => 10/5/2019 Custom pipe Now lets learn how to create custom pipe in Angular. We will be creating a summary pipe, which will summarize a long text content to some limited character provided as option or 50 character to default. Create a new file using standard naming convention. for example: summary.pipe.ts Import  Pipe  and  PipeTransform  from @angular/core. Export