Builtin, Async and Custom Pipes

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.

c) LowerCase Pipe

d) Currency Pipe

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

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.