Angular 8 Pipes | All Type of Pipes with Examples

In a real-world application, we may receive data in multiple forms, but some of these could in complex formats which are not easy for normal users to understand. For example Date object shows to date in a format like this

Sat Aug 03 2019 19:48:11 GMT+0530 (India Standard Time)

But it’s better to have something like this:

Saturday, 03 Aug 2019 07:50 PM

What are pipes in Angular?

Angular provides some helpful filters known as Pipes which makes it very easy to format or transform the data value according to our needs.

Pipes are used with a Pipe (|) character, it takes an input and returns a desired formatted output. Simple Right?

How to use a Pipe?

Pipes can be easily used in HTML templates. For example, convert big date object into readable formate.

lastLoggedInTime = new Date(2018, 5, 25);

Without Pipe

<div>
    Last Logged in @ {{lastLoggedInTime}}
    <!-- OUTPUT  Last Logged in @ Mon Jun 25 2018 11:48:11 GMT+0530 (India Standard Time) -->
</div>

With date Pipe

<div>
    Last Logged in @ {{lastLoggedInTime | date}}
    <!-- OUTPUT  Last Logged in @ Jun 25, 2018 -->
</div>

Adding Parameters in Pipes

Any number of the optional parameter(s) can be added in pipes by adding a (:) character. Like in date pipe which we used above can be used as follows:

{{lastLoggedInTime | date:'shortDate' }}
//6/25/18

{{lastLoggedInTime | date:'fullDate' }}
//Monday, June 25, 2018

{{lastLoggedInTime | date:'M/d/yy, h:mm a' }}
//6/25/18, 11:48 AM

 

Type of Built-in Pipes in Angular

Angular provides a number of Pipes:

DatePipe, CurrencyPipe, AsyncPipe, DecimalPipe, JsonPipe, KeyValuePipe, LowerCasePipe, PercentPipe, SlicePipe, TitleCasePipe, UpperCasePipe

How to create a custom Pipe?

There is a number of Built-in Pipes available, sometimes we may want to transform values in custom formats. Let's check how we can create our own Pipes in Angular application.

Create a new class which will import Pipe class and have @Pipe decorator with meta-information name

Run following ng command in CLI to generate a new pipe named 'foo'

$ ng g pipe foo

Above command will add FooPipe in app.module.ts file's declaration array.

The foo.pipe.ts file will look like this:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'foo'
})
export class FooPipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {
    return null;
  }

}

Change the transform method with following to return a modified value.

  transform(value: string, footext?: string): string {
    return footext+"_"+value+"_"+footext;
  }

Now we can use this Pipe in the template:

{{someFooText | foo:'Freaky' }}
//OUTPUT Freaky_MyFooText_Freaky

Multiple Pipes by Chaining

Multiple Pipes can be used on single value with the chaining of Pipe character as follows:

{{someFooText | foo:'Freaky' | foo2 | foo3:'what':'when' }}

 

Conclusions: In the above article, we discussed Pipes in Angular and how we can use built-in and create our own custom pipe classes using @Pipe decorator.

 

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments