Pipes
Pipes in Angular are a replacement of filters in AngularJS 1.x. Pipes are an improved version of filters that transform common data. Most of the applications fetch data from a server and transform it before displaying the data on the frontend. In such cases, pipes are very useful in transforming the data on rendering the template. Angular provides these cool API pipes for this purpose. Pipes take data as input and output transformed data as needed.
Common pipes
The following are the built-in pipes available in @angular/core, and we will see a few pipes with examples:
- AsyncPipe
- CurrencyPipe
- DatePipe
- DecimalPipe
- I18nPluralPipe
- I18nSelectPipe
- JsonPipe
- LowerCasePipe
- PercentPipe
- SlicePipe
- TitleCasePipe
- UpperCasePipe
Pipe with parameters
We can pass parameters to a pipe followed by a colon (:) symbol, as follows:
<p>Price of the book is {{ price | currency:'USD' }} </p>Multiple inputs to a pipe can be added by separating the values by (:), as shown:
<li *ngFor="let book of books | slice:1:3...
