Read full article on the Infragistics blog
Angular pipes take data as input and transform it to your desired output. For example, using interpolation you are displaying name of the product. Now you want the product name always displayed in the uppercase. You can do this using Angular pipe uppercase.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, OnInit } from '@angular/core'; | |
| @Component({ | |
| selector: 'app-root', | |
| template: `{{productName | uppercase}}` | |
| }) | |
| export class AppComponent { | |
| productName = 'Cricket Bat'; | |
| } |
In above component, productName will be displayed in uppercase. Therefore, pipe takes an input and transforms it into desired output as shown below:
Angular library provides us many built-in pipes like
- UpperCasePipe
- LowerCasePipe
- CurrencyPipe
- PercentPipe
- DatePipe etc.
Let us see how we could use the built-in currency pipe.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, OnInit } from '@angular/core'; | |
| @Component({ | |
| selector: 'app-root', | |
| template: `{{productName | uppercase}} = {{productPrice | currency}}` | |
| }) | |
| export class AppComponent { | |
| productName = 'Cricket Bat'; | |
| productPrice = 990; | |
| } |
You can also pass parameters to a pipe using the colon. You can pass input to currency pipe as shown below:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, OnInit } from '@angular/core'; | |
| @Component({ | |
| selector: 'app-root', | |
| template: `{{productName | uppercase}} = {{productPrice | currency:'CAD':'symbol-narrow':'4.2-2'}}` | |
| }) | |
| export class AppComponent { | |
| productName = 'Cricket Bat'; | |
| productPrice = 990; | |
| } |
Even though Angular provides many default pipes, there could be requirements when you create custom pipes. Creating a custom pipe is very as simple as creating a function. Let us say that we want to create a pipe, which will capitalize first letter of each words in a string.
Consider below component,
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, OnInit } from '@angular/core'; | |
| @Component({ | |
| selector: 'app-root', | |
| template: ` | |
| <ul *ngFor='let n of names'> | |
| <li>{{n.name}}</li> | |
| </ul> | |
| ` | |
| }) | |
| export class AppComponent { | |
| names = []; | |
| constructor() { | |
| this.names = this.getNames(); | |
| } | |
| getNames() { | |
| return [ | |
| { 'name': 'dhananjay Kumar' }, | |
| { 'name': 'jason beres' }, | |
| { 'name': 'adam jafe' } | |
| ]; | |
| } | |
| } |
This component will print names as below:
Now we want to capitalize the first letter of each word in the name. To do that we need to write a custom pipe. To create a pipe, you need to follow these steps:
Dhananjay Kumar 
Leave a comment