Pipes

• Pipes are functions that take inputs and operate on those inputs.
• We can define pipes with classes by implementing a special method called as transform.
• The transform method takes an input and returns the result.
• We can use pipes in our templates as well as in our code
• In angular 1 they used to be called as filters.
• We need to register pipe with component before using it.

main.ts

 import {Component, Input, Pipe} from 'angular2/core';  
 import {bootstrap} from 'angular2/platform/browser';  
 @Pipe({  
  name: 'pixelPipe'  
 })  
 class SimplePipe {  
  transform(input){  
   return input + 'px';  
  }  
 }  
 /**  
  * Define the Component.  
  */  
 @Component({  
  selector: 'app',  
  templateUrl : 'templates/app.tpl.html',  
  pipes:[SimplePipe]  
 })  
 class StarterTemplate {  
  private name: string;  
  private appId: string;  
  constructor () {  
   this.name = 'Basic Pipe Example';  
  }  
 }  
 /**  
  * Bootstrap the app with `StarterTemplate`.  
  */  
 bootstrap(StarterTemplate, []);  

app.tpl.html

 <h1>{{ name }}</h1>  
 <h1>  
   value is: {{ '25' | pixelPipe }}  
 </h1>  

Pipe with parameters

• In transform method we can pass the second attribute called as args which is an array.
• In the template we can pass parameters after pipe separated by a ":" and they are passed in as array to the second attribute in the "transform" method.
• After beta 16 they are passed as separate parameters in transform method as shown below.

main.ts

 class UnitPipe {  
  transform(input,arg1,arg2){  
   let unit = arg1 || 'px';  
   arg2 = arg2 || '5';  
   return input + unit + arg2;  
  }  
 }  
 /**  
  * Define the Component.  
  */  
 @Component({  
  selector: 'app',  
  templateUrl : 'templates/app.tpl.html',  
  pipes:[SimplePipe,UnitPipe]  
 })  

app.tpl.html

 <h1>{{ name }}</h1>  
 <h1>  
   value is: {{ '25' | pixelPipe }}  
 </h1>  
 <h1>  
   New Value is: {{ '25' | unit:'%':'2' }}  
 </h1>  

Using pipes inside components or controllers

• Since pipes are of class types we can instantiate them in our components or controllers and then call the transform method.

main.ts

 @Pipe({  
  name: 'unit'  
 })  
 class UnitPipe {  
  transform(input,arg1,arg2){  
   let unit = arg1 || 'px';  
   arg2 = arg2 || '5';  
   return input + unit + arg2;  
  }  
 }  
 /**  
  * Define the Component.  
  */  
 @Component({  
  selector: 'app',  
  templateUrl : 'templates/app.tpl.html',  
  pipes:[SimplePipe,UnitPipe]  
 })  
 class StarterTemplate {  
  private name: string;  
  private value: string;  
  constructor () {  
   const unitPipe = new UnitPipe();  
   this.name = 'Basic Pipe Example';  
   this.value= unitPipe.transform('12','%','10');  
  }  
 }  

Date Pipe

• Used to show and format dates
• When using inside controller we need to import this pipe from angular2 pipes
• The import path may differ depending on angular version we are using.

main.ts

 import {Component, Input, Pipe} from 'angular2/core';  
 import {bootstrap} from 'angular2/platform/browser';  
 import {DatePipe} from 'angular2/src/common/pipes';  
 @Pipe({  
  name: 'pixelPipe'  
 })  
 class SimplePipe {  
  transform(input){  
   return input + 'px';  
  }  
 }  
 @Pipe({  
  name: 'unit'  
 })  
 class UnitPipe {  
  transform(input,arg1,arg2){  
   let unit = arg1 || 'px';  
   arg2 = arg2 || '5';  
   return input + unit + arg2;  
  }  
 }  
 /**  
  * Define the Component.  
  */  
 @Component({  
  selector: 'app',  
  templateUrl : 'templates/app.tpl.html',  
  pipes:[SimplePipe,UnitPipe]  
 })  
 class StarterTemplate {  
  private name: string;  
  private value: string;  
  private today: Date;  
  private todayInside;  
  constructor () {  
   const unitPipe = new UnitPipe();  
   const datePipe = new DatePipe();  
   this.name = 'Basic Pipe Example';  
   this.value= unitPipe.transform('12','%','10');  
   this.today=new Date();  
   this.todayInside=datePipe.transform(new Date(),'MMMh');  
  }  
 }  
 /**  
  * Bootstrap the app with `StarterTemplate`.  
  */  
 bootstrap(StarterTemplate, []);  

html

 <h1>{{ name }}</h1>  
 <h1>  
   value is: {{ '25' | pixelPipe }}  
 </h1>  
 <h1>  
   New Value is: {{ '25' | unit:'%':'2' }}  
 </h1>  
 <p>Pipe value from Component is : {{value}}</p>  
 <h2>Today is : {{today | date:'yMMMEEEh'}}</h2>  
 <h2>Today coming from controller is : {{todayInside}}</h2>  

Slice Pipe

• Using Slice pipe we can get substring of a string or subset of a list.
• Takes 2 parameters one the start of the substring or subset and second parameter which is one more than the end of the substring or subset.
• If second parameter is not given it returns till end of the substring or subset.
• If we put -1 it will return us the last item in array i.e. it will start from last.

main.ts

   this.students=[  
    {id:1, name:'Tom'},  
    {id:2, name:'Jerry'},  
    {id:3, name:'Goofy'},  
    {id:4, name:'Flinstone'},  
    {id:5, name:'Shabby'}  
   ];  

html

 <h3>{{'Slice String' | slice:2:7}}</h3>  
 <ul>  
   <li *ngFor="#student of students |slice:1:3" >  
     {{student.id}},{{student.name}}  
   </li>  
 </ul>  

Async Pipe

• Useful when we are working with Promises or Observable.
• In example we are showing you async pipe with a promise.

main.ts

 import {Component, Input, Pipe} from 'angular2/core';  
 import {bootstrap} from 'angular2/platform/browser';  
 /**  
  * Define the Component.  
  */  
 @Component({  
  selector: 'app',  
  templateUrl : 'templates/app.tpl.html'  
 })  
 class StarterTemplate {  
  private name: string;  
  private value: Promise<string>;  
  private resolveValue: Function = null;  
  constructor () {  
   this.name = 'Async Pipe Example';  
   this.value=new Promise<string>((resolve,reject) =>{  
    this.resolveValue=resolve;  
   });  
   // console.log(this.value);  
  }  
  setValue(){  
   setTimeout(()=>{  
    this.resolveValue('Future Value');  
   },1000)  
  }  
 }  
 /**  
  * Bootstrap the app with `StarterTemplate`.  
  */  
 bootstrap(StarterTemplate, []);  

html

 <h1>{{ name }}</h1>  
 <p>{{value |async}}</p>  
 <button (click)="setValue()">Set Value</button>  

next