Post
Ask Question

How To Use Pipes In Angular Using Node.JS And VS Code

Angular Pipe

 
Angular pipes can be used to transfer data into the desired output. Pipes take data in input and transfer data to a different output. Using this pipe operator ( | ), we can apply the pipe's features to any of the properties in our angular project. 
 
Angular provides two types of pipe 
 
 

Built-in Pipes

 
Angular built-in pipes are pipes that are provided by the angular library. 
 
Upper Case Pipes
 
Uppercase pipes are used to change the normal text into uppercase text.
 
pipes.html
  1. <h1>Pipe and Directives in html</h1>        
  2.    <hr>        
  3.       <br>        
  4.          <h2>normal text    ==    {{text}}</h2> <br> <br>        
  5.          <h2>afer using uppercase pipe      ==    {{text | uppercase}}</h2>        
  6.    <br><br><br><br>          
  7. <hr>   
pipe.ts
  1. import {Component} from '@angular/core';      
  2. @Component({      
  3.     selector:'app-pipe',      
  4.     templateUrl:'./pipecomponent.html',      
  5.     styleUrls:['./pipecomponent.css']      
  6. })      
  7. export class pipecomponent{      
  8.     text="hello this is Chaman Gautam today I told you about the pipes in an angular"      
  9.           
  10. }      
Now compile this project using the command " ng serve" and after compiling successfully the output will be shown like this:
 
OUTPUT
 
 
LowerCase pipes
 
LowerCase Pipe is used to change the normal text into lowercase text.
 
pipes.html
  1. <h1>Pipe and Directives in html</h1>        
  2. <hr>        
  3. <br>        
  4. <h2>normal text    ==    {{text}}</h2> <br> <br>        
  5. <h2>afer using lowercase pipe      ==    {{text | lowercase}}</h2>        
  6. <br><br><br><br>        
  7. <hr>     
 pipes.ts
  1. import {Component} from '@angular/core';        
  2. @Component({        
  3.     selector:'app-pipe',        
  4.     templateUrl:'./pipecomponent.html',        
  5.     styleUrls:['./pipecomponent.css']        
  6. })        
  7. export class pipecomponent{        
  8.     title="      
  9. Hello I AM CHAMAN GAUTAM AND Today I Told You About The Lower Case Example      
  10. "        
  11. }       
Now compile this project using the command " ng serve" and after compiling successfully the output will be shown like this:
 
OUTPUT
 
 
Date Pipe
 
Date Pipe is used to display the date.
 
pipes.html
  1. <h2> date and time </h2>  
  2.   
  3. <h2>Today date is    ==   {{date| date:'dd/mm/yyyy' }}  
  4. </h2>  
  5. <h2>Today date is    ==   {{date| date:'shortTime' }}  
  6. </h2>  
 pipes.ts
  1. import {Component} from '@angular/core';      
  2. @Component({      
  3.     selector:'app-pipe',      
  4.     templateUrl:'./pipecomponent.html',      
  5.     styleUrls:['./pipecomponent.css']      
  6. })      
  7. export class pipecomponent{      
  8.            
  9.     date= new Date();      
  10.           
  11. }      
Now compile this project using the command " ng serve" and after compiling successfully output will be shown like this:
 
OUTPUT
 
 
Currency Pipe
 
Currency Pipes are used to print the currency of the desired country
 
pipes.html
  1. <h1>Corrency Pipe</h1>        
  2. <h3>normal value in indian rupies   ==   {{ indianrupees}}</h3>        
  3. <h2>value is converted in usd    ==          
  4. {{ indianrupees| currency:'USD'}}        
  5. </h2>   
 pipes.ts
  1. import {Component} from '@angular/core';      
  2. @Component({      
  3.     selector:'app-pipe',      
  4.     templateUrl:'./pipecomponent.html',      
  5.     styleUrls:['./pipecomponent.css']      
  6. })      
  7. export class pipecomponent{      
  8.          
  9.      indianrupees=1234567890;      
  10. }    
Now compile this project using the command " ng serve" and after compiling successfully output will be shown like this:
 
OUTPUT
 
 
Decimal Pipe
 
Decimal pipes are used to change a normal value into a decimal value.
 
pipes.html
  1. <h2>Decimal pipe</h2>      
  2. <h2>       
  3.     {{value | number : '9.16'}}      
  4. </h2>   
 pipes.ts
  1. import {Component} from '@angular/core';      
  2. @Component({      
  3.     selector:'app-pipe',      
  4.     templateUrl:'./pipecomponent.html',      
  5.     styleUrls:['./pipecomponent.css']      
  6. })      
  7. export class pipecomponent{      
  8.         value=8765435;      
  9. }      
Now compile this project using the command " ng serve" and after compiling successfully output will be shown like this:
 
OUTPUT
 
 
Percentage Pipe
 
Percentage pipe is used to change a normal value into the percentage value. 
  1. <h2>percent pipe</h2>      
  2. <h2>{{value| percent}}</h2>      
  3. <hr>    
pipes.ts
  1. import {Component} from '@angular/core';      
  2. @Component({      
  3.     selector:'app-pipe',      
  4.     templateUrl:'./pipecomponent.html',      
  5.     styleUrls:['./pipecomponent.css']      
  6. })      
  7. export class pipecomponent{      
  8.         value=8765435;      
  9. }      
Now compile this project using the command " ng serve" and after compiling successfully output will be shown like this:
 
OUTPUT
 
 
Slice Pipe
 
A slice pipe is a parameterized pipe. Parameterized pipes accept any number of the optional parameters to get the desired output from the given input. Slice pipe is used to print a list of data like month list, days list, and a product list of any company.
  1. <h2>slice pipe</h2>      
  2.  <b>{{months | slice : 2:11}}</b>      
  3.  pipe.ts  
pipes.ts
  1. import {Component} from '@angular/core';      
  2. @Component({      
  3.     selector:'app-pipe',      
  4.     templateUrl:'./pipecomponent.html',      
  5.     styleUrls:['./pipecomponent.css']      
  6. })      
  7. export class pipecomponent{      
  8.     months=['Januarr','February','March','April','May','June','July','August','September','October','Novenmer','December'];      
  9. }       
Now compile this project using the command " ng serve" and after compiinge successfully the output will be shown like this:
 
OUTPUT
 
 
In this example, we display limited data between 2 to 11 from a list. means we print data according to the requirement.
 
Another example of slice pipes,
 
pipes.html
  1. <h2>slice pipe</h2>        
  2.  <b>{{months | slice}}</b>        
 pipes.ts
  1. import {Component} from '@angular/core';        
  2. @Component({        
  3.     selector:'app-pipe',        
  4.     templateUrl:'./pipecomponent.html',        
  5.     styleUrls:['./pipecomponent.css']        
  6. })        
  7. export class pipecomponent{        
  8.     months=['Januarr','February','March','April','May','June','July','August','September','October','Novenmer','December'];        
  9. }        
Now compile this project using the command " ng serve" and after compiling successfully the output will be shown like this:
 
OUTPUT
 
 
In this example, we print a complete list of data. 
 
JSON pipes
 
JSON pipes are used to print complete data into the JSON format. 
 
pipes.html
  1. <h2>json pipe</h2>      
  2.    <h2>{{ jsnoval | json}}</h2>      
  3. <hr>    
pipes.ts
  1. import {Component} from '@angular/core';      
  2. @Component({      
  3.     selector:'app-pipe',      
  4.     templateUrl:'./pipecomponent.html',      
  5.     styleUrls:['./pipecomponent.css']      
  6. })      
  7. export class pipecomponent{      
  8.           
  9.     jsnoval={name:'chaman', course:'mca', address:'Vill+Po:- Salarpur kalan NTPC Dadri GB Nagar' } ;      
  10.           
  11. }      
Now compile this project using the command " ng serve" and after compiling successfully theoutput will be shown like this:
 
OUTPUT
 
 
I hope you enjoyed this article. To learn more about angular follow me C# Chaman Gautam and to learn about more technology follow C# Corner. Thank you.


Similar Articles