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"
  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>
  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{
  9. date= new Date();
  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{
  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{
  9. jsnoval={name:'chaman', course:'mca', address:'Vill+Po:- Salarpur kalan NTPC Dadri GB Nagar' } ;
  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.