Post
Ask Question

Pipes In Angular 6

In this article, we are going to learn about Pipes in Angular 6.

Introduction

Pipes are used to format the data before displaying in the View. Pipe is used by using |. This symbol is called a Pipe Operator.

Types of pre-defined or built-in pipes in Angular 6.

  1. Lowercase
  2. Uppercase
  3. Titlecase
  4. Slice
  5. Json Pipe
  6. Number Pipe
  7. Percent Pipe
  8. Currency Pipe
  9. Date Pipe

Let's understand more about pipes in detail by using an example. Create a project using CLI.

ng new AngularPipes

Open this project using the below command.

Code .

Step 1

Open app.component.ts.

Lowercase

Syntax - Text|lowercase

Uppercase

Syntax - Text|uppercase

Code Snippets

App.component.ts

  1.  import {  
  2.      Component  
  3.  } from '@angular/core';  
  4.  @Component({  
  5.      selector: 'app-root',  
  6.      template: `  
  7. <h2>{{name|lowercase}}</h2>  
  8. <h2>{{name|uppercase}}</h2>  
  9. `,  
  10.  })  
  11.  export class AppComponent {  
  12.      name = 'Angular Pipes';  
  13.  }  

Titlecase

Titlecase converts the first letter of a word in the uppercase.

Syntax - name|titlecase

Code Snippets 

  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'app-root',  
  6.     template: `  
  7. <h2>{{name|titlecase}}</h2>  
  8. `,  
  9. })  
  10. export class AppComponent {  
  11.     name = 'Welcome to angular pipes project';  
  12. }  
Slice

Syntax - Text|slice:3

Code snippets 
  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'app-root',  
  6.     template: `  
  7. <h2>{{name|slice:3}}</h2>  
  8. `,  
  9. })  
  10. export class AppComponent {  
  11.     name = 'AngularPipes';  
  12. }  

JSON Pipe

Syntax -Text|json

Code snippets
  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'app-root',  
  6.     template: `  
  7. <h2>{{cities|json}}</h2>  
  8. `,  
  9. })  
  10. export class AppComponent {  
  11.     name = 'AngularPipes';  
  12.     public cities = {  
  13.         "city": "Jaipur",  
  14.         "country": "India"  
  15.     }  
  16. }  
Number

Syntax - value | number:'1.2.2'

Currency Pipe

Syntax - value||currency

By default, the currency is USD but we can change it by specifying the country name. 

By passing the country as an argument, we get the following.

Syntax - value||currency:'GBP'

Code snippets 
  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'app-root',  
  6.     template: `  
  7. <h2>{{8.7844|number:'1.2-2'}}</h2>  
  8. <h2>{{0.23|percent}}</h2>  
  9. <h2>{{0.23|currency}}</h2>  
  10. <h2>{{0.23|currency:'GBP'}}</h2>  
  11. `,  
  12. })  
  13. export class AppComponent {  
  14.     name = 'AngularPipes';  
  15. }  
Date Pipes

Code snippets
  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'app-root',  
  6.     template: `  
  7. <h2>{{date}}</h2>  
  8. <h2>{{date|date:'short'}}</h2>  
  9. <h2>{{date|date:'shortdate'}}</h2>  
  10. `,  
  11. })  
  12. export class AppComponent {  
  13.     name = 'AngularPipes';  
  14. }  
Summary

In this article, we learned about Pipes and types of Pipes in Angular. Pipes are a useful feature in Angular and are used to format the data before displaying in the View.


Similar Articles