Angular 5 : Builtin, Async and Custom Pipes

Important announcement : We are moving all our content to new website - Witscad Courses . You can find the updated complete Angular course here - A Complete Angular Tutorial. Feel free to visit.

In simple words, In Angular, a pipe takes in data as input and transforms it to a desired output. It is corresponding to what filters are in AngularJS.

A quick example :

<p>{{date | date:'shortDate'}}</p> <p>{{date | date:'longDate'}}</p>

It transforms a date string to short date and long date format.

There are three type of Pipes Angular provides:

1) Builtin Pipes:

There are several inbuilt pipes provided by Angular framework. Following is the list of some of the Builtin Pipes:

a) DatePipe:

date_expression | date[:format]

where expression is a date object or a number and format indicates which date/time components to include. The format can be predifined as shown below or custom as shown in the table.

Format	Description
medium	equivalent to 'yMMMdjms' (e.g. Sep 3, 2010, 12:05:08 PM for en-US)
short	equivalent to 'yMdjm' (e.g. 9/3/2010, 12:05 PM for en-US)
fullDate	equivalent to 'yMMMMEEEEd' (e.g. Friday, September 3, 2010 for en-US)
longDate	equivalent to 'yMMMMd' (e.g. September 3, 2010 for en-US)
mediumDate	equivalent to 'yMMMd' (e.g. Sep 3, 2010 for en-US)
shortDate	equivalent to 'yMd' (e.g. 9/3/2010 for en-US)
mediumTime	equivalent to 'jms' (e.g. 12:05:08 PM for en-US)
shortTime	equivalent to 'jm' (e.g. 12:05 PM for en-US)

Example :

{{ dateObj | date }} // output is 'Jan 10, 2016'

{{ dateObj | date:'medium' }} // output is 'Jan 10, 2016, 2:10:15 PM'

{{ dateObj | date:'shortTime' }} // output is '2:10 PM'

{{ dateObj | date:'mmss' }} // output is '10:15'

b) UpperCasePipe,

expression | uppercase

It converts value into an uppercase string using String.prototype.toUpperCase().

Example:

<p>In uppercase: <pre>'{{value | uppercase}}'</pre>

c) LowerCasePipe:

expression | lowercase

It converts value into a lowercase string using String.prototype.toLowerCase().

Example:

<p>In lowercase: <pre>'{{value | lowercase}}'</pre>

d) CurrencyPipe:

number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]

where
currencyCode - the ISO 4217 currency code, such as USD for the US dollar and EUR for the euro.

symbolDisplay - a boolean indicating whether to use the currency symbol or code.
true - use symbol (e.g. $).
false(default): use code (e.g. USD).

digitInfo -
digitInfo is a string which has a following format:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

e) PercentPipe:

number_expression | percent[:digitInfo]

where digitInfo is same as mentioned above.

Note : Pipes can be chained as:{{ birthday | date | uppercase}}

2. Async Pipes:

observable_or_promise_expression | async

An async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes.

3. Custom Pipes:

We can create very own custom pipes by using the @Pipe decorator and implementing the PipeTransform interface:

Example:

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

@Pipe({ name: 'HtoS' }) 
export class HoursToSeconds implements PipeTransform { 
  transform(value: string, args: any[]){
  return parseFloat(value)*3600; 
  } 
}

Live Code:

Plunker here: https://embed.plnkr.co/plunk/IJZ3E1d30wBqziOcdp6z?show=app,preview