Angular Tutorial For Beginners - Part Seven - Using Pipes In Angular

In this aticle, you will learn how to use pipes in Angular.

This is part 7 of the Angular Tutorial for Beginners series.
This part of the Angular tutorials series discusses how we can transform our output using Pipes.
 
Pipes transform your data into a format of your choice. For example, we can use Pipes if we want our date in some particular date format.
 
Angular provides some built-in pipe methods. We can also create our own custom pipes.
 
Let’s have a look at some of the built-in pipes in Angular.
 

Built-in Pipes

 
Async Pipe
 
Remember how we had subscribed to an observable to get the data from HTTP GET. An Async pipe can also be used for the same. An async pipe subscribes to an observable and returns the latest value it has emitted.
 
Let’s modify our code to use async instead of subscribe method.
 
We will comment out the subscribe method and change employees to be a type of Observable of IEmployee in employee.component.ts.
 
Using Pipes In Angular 
 
Then, in the employee.component.html file, we will modify ngIf and ngFor to use the async pipe.
 
Using Pipes In Angular 
 
Our output will be the same as before which means we have successfully used the async pipe in place of the Subscribe method.
 
Using Pipes In Angular 
 
Now, let’s use the below code to learn about some other pipes.
 
We will write the following code in app.component.ts.
  1. export class AppComponent {  
  2.    title = 'Welcome';  
  3.    birthday = new Date(1990, 5, 10);  
  4.    jsonval = {name:'John', age:'22', address:{a1:'Mumbai', a2:'Maharashtra'}};  
  5.    days = ["Mon""Tues""Wed""Thurs""Fri""Sat","Sun"];  
  6. }  
Using Pipes In Angular 
 
And the following code in app.component.html
  1. <div style="text-align:center;border:1px solid blue">   
  2.     <b>Uppercase Pipe</b> : {{title | uppercase}}<br>  
  3.     <b>Lowercase Pipe</b> : {{title | lowercase}}<br>  
  4.     <b>Currency Pipe</b> : {{1234.56 | currency:"USD"}}<br>     
  5.     <b>Json Pipe</b> : {{ jsonval | json }}<br>  
  6.     <b>Percent Pipe</b> : {{00.54565 | percent}}<br>  
  7.     <b>Slice Pipe</b> : {{days | slice:2:4}}<br>  
  8.     <b>Date Pipe</b> : {{birthdate | date}}<br>  
  9.     <b>Date Pipe</b> : {{birthdate | date:'fullDate'}}<br>  
  10. </div>  
Using Pipes In Angular 
 
The output will be displayed as below.
 
Using Pipes In Angular 
 

Upper Case/Lowercase pipes

 
The title above will be displayed in upper and lower case as below.
 
{{title | uppercase}} will be displayed as,
 
Using Pipes In Angular 
 
{{title | lowercase}} will be displayed as,
 
Using Pipes In Angular 

 
Currency Pipe

 
{{1234.56 | currency:”USD”}}
 
Displays the currency with the USD symbol as below.
 
Using Pipes In Angular 

 
JSON Pipe

 
Displays the data as JSON.

 
Percent Pipe

 
Displays the data as a percentage.
 
{{00.54565 | percent}} will be displayed as 55%.
 

Slice Pipe

 
Creates a new array or string containing a subset of the elements.
 
{{days | slice:2:4}} creates a subset of Wed & Thurs. ‘2’ denotes the start index. Indexing starts from ‘0’. 4 denotes the end index, but slice will display the elements before the end index. If you need more information on the slice pipe, this link from Angular is really helpful.
 

Date pipe

 
We will display the date as below.
 
{{birthdate | date}}
 
Displays the date in the following format.
 
Using Pipes In Angular 
 

Parameterized Pipes

 
We can also add parameters to a pipe as below. Here, ‘fullDate’ is a parameter.
 
My birthday is on {{ birthdate | date:”fullDate” }}
 
Using Pipes In Angular 
 

Chaining Pipes

 
We can also chain the pipes as below.
 
My birthday is on {{ birthdate | date:”fullDate”|uppercase }}
 
Using Pipes In Angular 
 

Pure & Impure Pipes

 
Pipes are classified as pure and impure also. If the pure flag is false, then the pipe is impure. This flag can be set when the pipe is created. More on this when we create a custom flag below.
 
The difference between the two is that pure pipes are executed only when there is a pure change, i.e., change to primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object). By default, pipes are pure. An impure pipe is called for every change detection.
 
Impure pipes can degrade the performance of our Angular application.
 

Custom Pipes

 
Now, let’s create a custom pipe that will take in an input value, and change the ‘-‘ in the input to ‘/’.
 
Let’s create a new class hypenToSlash.pipe.ts.
  1. import { Pipe, PipeTransform } from '@angular/core';  
  2.    
  3. @Pipe({name: 'hyphenToSlash'})  
  4. export class HyphenSlashPipe implements PipeTransform {  
  5.   transform(inputString: string): string {  
  6.     inputString = inputString.replace('-','/');  
  7.     return inputString  
  8.   }  
  9. }  
Using Pipes In Angular 
 
To implement the custom pipe, all we did was added an @Pipe directive and implemented the transform method of the PipeTransform interface.
 
Let’s import the pipe into app.module.ts as below.
 
Using Pipes In Angular 
 
Now, let’s use it. In the app.component.ts, we will use our custom pipe as below.
 
{{ pipeInput | hyphenToSlash }}
  1. {{ "7-9" | hyphenToSlash }}  
Using Pipes In Angular 
 
The output will be as below.
 
Using Pipes In Angular 
 
Note
You can modify the above pipe to be impure by setting an impure flag as below.
 
Using Pipes In Angular 
 
This concludes our article on using pipes in Angular. In the next article, we will learn about creating nested components in Angular. The official Angular website has some exciting documentation on pipes.
 
This article was originally published on my website taagung.