In simple words, In Angular 2, a pipe takes in data as input and transforms it to a desired output. It is corresponding to what filters are in Angular 1.
It transforms a date string to short date and long date format.
There are several inbuilt pipes provided by Angular 2 framework. Following is the list of some of the Builtin Pipes:
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.
Example :
It converts value into an uppercase string using String.prototype.toUpperCase().
Example:
It converts value into a lowercase string using String.prototype.toLowerCase().
Example:
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}
where digitInfo is same as mentioned above.
Note : Pipes can be chained as:{{ birthday | date | uppercase}}
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.
Example:
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 2 provides:
1) 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]
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 'angular2/core'; @Pipe({ name: 'HtoS' }) export class HoursToSeconds implements PipeTransform { transform(value: string, args: any[]){ return parseFloat(value)*3600; } }
