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.
| 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) 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().
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) Percent Pipe
where digitInfo is same as mentioned above.
Note : Pipes can be chained as:{{ birthday | date | uppercase}}
2. Async Pipes
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
