Angular Pipes

Pipes are similar or advanced version of filter in Angular JS. It transforms or manipulate data directly into the templates and makes the code structured and easy to understand.

Syntax:-

myVal | myPipe: parameter1: parameter 2 | mySecondPipe: parameter 1

The Pipe expression start with value followed by symbol pipe (|) then pipe name. The parameter for pipe sent, separated by colon (:) symbol. The order of executing pipe is from left to right. NOTE: pipe operator only works in angular template not in JavaScript. In JavaScript pipe operators works as a bitwise operator.

Different types of Pipes in Angular 2 and above are below:-

  • 1. Built-In Pipe
  • 2. Parameterizing a Pipe
  • 3. Chaining Pipe
  • 4. Custom Pipe
  • 5. Pure Pipe
  • 6. Impure Pipe

Built-In Pipes

<!-- input: message='Welcome to ProgramIdea' -->

<p>{{message | lowercase}}</p>

<!-- output: welcome to programidea -->

 

<!-- input: message='Welcome to ProgramIdea' -->

<p>{{message | uppercase}}</p>

<!-- output: WELCOME TO PROGRAMIDEA -->

 

<!-- input: message='Welcome to ProgramIdea' -->

<p>{{message | titlecase}}</p>

<!-- output: Welcome To Programidea -->

 

<!-- input: todayDateTime=Date.now() -->

<p>{{todayDateTime | date}}</p>

<!-- output: Apr 20, 2019 -->

 

<!-- input: marks=0.61 -->

<p>{{ marks | percent }}</p>

<!-- output: 61% -->

 

<!-- input: decimalValue=10.6546 -->

<p>{{ decimalValue|number }}</p>

<!-- output: 10.655 -->

 

<!-- input: amount=10.1234 -->

<p>{{ amount|currency }}</p>
<!-- output: $10.12 -->

Parameterizing a Pipe

You can also pass parameters of pipe. forr example: you can pass format type 'longDate' of date of date pipe

 

<!-- input: todayDateTime=Date.now() -->

<p>{{todayDateTime | date:'longDate'}}</p>

<!-- output: April 19, 2019 -->

Chaining Pipe

You can chain muliple pipes together. Here we are using date and lowercase pipes together.

<!-- input: todayDateTime = Date.now() -->
<p>{{todayDateTime | date | lowercase}}</p>
<!-- output: apr 21, 2019 -->

Custom Pipe

Custom pipe

Pure Pipe

Impure Pipe

Built-in pipes

1. LowerCase Pipe

Used for showing string in lower case

test.component.ts

 message:string='Welcome to Program Idea';

 

test.component.html

 

    <p>{{message | lowercase}}</p>

 

Output: welcome to program idea

2. UpperCase Pipe

Used for showing string in upper case

test.component.ts

 message:string='Welcome to Program Idea';

test.component.html

 

    <p>{{message | uppercase}}</p>

 

Output: WELCOME TO PROGRAM IDEA

3. TitleCase Pipe

Used for showing string in title case

test.component.ts

 message:string='Welcome to Program Idea';

test.component.html

 

    <p>{{message | titlecase}}</p>

 

Output: Welcome To Program Idea

4. Currency Pipe

Used for showing currency format

test.component.ts

amount:number=10.1234;

Options Output
{{ amount|currency }} $10.20
{{ amount|currency:'INR' }} ₹10.20
{{ amount|currency:'INR':'code' }} INR10.20
{{ amount|currency:'INR':'symbol' }} ₹10.20
{{ amount|currency:'INR':'symbol':'2.2-4' }} ₹10.1234

5. Date Pipe

Used for showing string in title case

test.component.ts

 

todayDateTime=Date.now();

 

Options Output
{{ todayDateTime | date:'short' }} 4/19/19, 10:43 PM
{{todayDateTime | date:'shortDate'}} 4/19/19
{{todayDateTime | date:'shortTime'}} 10:58 PM
{{todayDateTime | date:'medium'}} Apr 19, 2019, 10:58:16 PM
{{todayDateTime | date:'mediumDate'}} Apr 19, 2019
{{todayDateTime | date:'mediumTime'}} 10:58:16 PM
{{todayDateTime | date:'long'}} April 19, 2019 at 10:58:16 PM GMT+5
{{todayDateTime | date:'longDate'}} April 19, 2019
{{todayDateTime | date:'longTime'}} 10:58:16 PM GMT+5
{{todayDateTime | date:'full'}} Friday, April 19, 2019 at 10:58:16 PM GMT+05:30
{{todayDateTime | date:'fullDate'}} Friday, April 19, 2019
{{todayDateTime | date:'fullTime'}} 10:58:16 PM GMT+05:30
{{todayDateTime | date:'d/MM/yyyy'}} 19/04/2019

6. Decimal Pipe

Used for showing string in title case

test.component.ts

 decimalValue:number=10.6546;

 

Options Output
{{ decimalValue|number }} 10.655
{{ decimalValue|number:'2.0-2' }} 10.65
{{ decimalValue|number:'4.2-5' }} 0,010.6546
{{ decimalValue|number:'2.0-0'}} 11

7. Json Pipe

It is useful for debugging and displays an object as a Json string. It uses JSON.stringify in backend.

test.component.ts

 jsonData:any= {'id':'1','name':'program idea'};

 

test.component.html

 <p>{{ jsonData | json }}</p>

 

Oupput: { "id": "1", "name": "program idea" }

8. Percent Pipe

Transforms a number to a percentage string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

test.component.ts

 marks:number=0.61;

Options Output
{{ marks | percent }} 61%
{{ marks | percent:'2.2-2' }} 61.00%