Builtin, Async and Custom Pipes

( 11 users )

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

a) Date Pipe

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.

mediumequivalent to 'yMMMdjms' (e.g. Sep 3, 2010, 12:05:08 PM for en-US)
shortequivalent to 'yMdjm' (e.g. 9/3/2010, 12:05 PM for en-US)
fullDateequivalent to 'yMMMMEEEEd' (e.g. Friday, September 3, 2010 for en-US)
longDateequivalent to 'yMMMMd' (e.g. September 3, 2010 for en-US)
mediumDateequivalent to 'yMMMd' (e.g. Sep 3, 2010 for en-US)
shortDateequivalent to 'yMd' (e.g. 9/3/2010 for en-US)
mediumTimeequivalent to 'jms' (e.g. 12:05:08 PM for en-US)
shortTimeequivalent to 'jm' (e.g. 12:05 PM for en-US)

{{ 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) UpperCase Pipe

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

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

c) LowerCase Pipe

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

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

d) Currency Pipe

number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
It converts value into a lowercase string using String.prototype.toLowerCase().
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:

e) Percent Pipe

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.

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://stackblitz.com/edit/angular-builtin-async-and-custom-pipes?embed=1

To Do

* Note : These actions will be locked once done and hence can not be reverted.

1. Track your progress [Earn 200 points]

2. Provide your ratings to this chapter [Earn 100 points]

Data and Event Bindings
Working with Nested Components
Note : At the end of this chapter, there is a ToDo section where you have to mark this chapter as completed to record your progress.