Introduction



AngularJS 1.x has filters which are used for many common uses, like formatting dates, string display in upper or lower case etc. These filters are known as "Pipes" in Angular 2.



Pipes allow us to change the data inside the template. Normally, a pipe takes the data and transforms this input to the desired output. There are many built-in pipes in Angular 2. In this article, we will cover build-in pipes of Angular 2 applications.



To demonstrate the example, I have already created an Angular 2 app. Within component, I have created a member variable which is used in template HTML.



App.component.ts



import { Component } from '@angular/core' ; @Component({ selector: 'test-app' , templateUrl: './app/PipesExample.html' }) export class AppComponent { joiningDate = new Date(1990, 4, 15, 15, 12, 10); name = 'Jignesh' ; grade = 0.99; rating = 8.36; priceEuro = 80.6; priceUsd = 145.6; description = "This is my Test" ; testArray:Array<any> =[{id:1, name: 'Test 1' },{id:2, name: 'Test 2' }]; }

<div> <h4>Date Pipe Example</h4> <b>Date format:</b> My joining Date is {{joiningDate | date}}.<br/> <b>Specific Date Format:</b> My joining Date is {{joiningDate | date: "dd/MM/yyyy" }}<br/> <b>Full Date Format:</b> My joining Date is {{joiningDate | date: "fullDate" }}<br/> <b>Short Time format:</b> My joining Date is {{joiningDate | date: "shortTime" }}<br/> <b>Medium Date format:</b> My joining Date is {{joiningDate | date: "mediumDate" }}<br/> </div>

<div> <h4>Upper Case Pipe Example</h4> My name is {{name | uppercase}}! </div>

<div> <h4>Lower Case Pipe Example</h4> My name is {{name | lowercase}}! </div>

<div> <h4>Decimals/Percentages/Number Pipe Example</h4> Grade : {{grade | percent: '.3' }} <br/> Rating : {{rating | number: '3.1-2' }} </div>

<div> <h4>Currency Pipe Example</h4> <b>Euro: </b> My Laptop price is {{priceEuro | currency: 'EUR' : true }} <br/> <b>USD:</b>My Laptop price is {{priceUsd | currency: 'USD' : true }} </div>

<div> <h4>Slice Pipe Example</h4> <b>Without Slice:</b> {{description}}<br/> <b>With Slice:</b>{{description | slice:0:10}}... </div>

import { Component } from '@angular/core' ; @Component({ selector: 'test-app' , templateUrl: './app/PipesExample.html' }) export class AppComponent { … …. promise: Promise; constructor() { this .promise = new Promise( function (resolve, reject) { setTimeout( function () { resolve( "Hello, This text showing from promise." ); }, 2000) }); … …. } }

<div> <h4>Async Pipe Example</h4> {{ promise | async}} </div>

<div> <h4>Json Pipe Example</h4> {{ testArray | json}} </div>