Angular 2 Pipes

Pipes in Angular 2 transform the data in our templates (HTML) for a good user experience.

angular 2 pipes example
angular 2 pipes example

 

A Pipe is a transformer of a given data into a more readable data.

 

try angular 2 pipes
try angular 2 pipes

 

Imagine that we have a text that contains the first name of a user in lower case (this is the input) when the Pipe receives this data it transforms this input into an output (e.g. transform into Uppercase)

 

Built-in Pipes
Built-in Pipes

 

Built-in Pipes (e.g. | uppercase) they come with Angular 2.

In our first example we will transform the yourName = “everybody” into ‘EVERYBODY’ with an Angular 2 built in Pipe: uppercase.

Keep in mind that this Pipe (uppercase comes with angular 2). We have other Pipes DatePipe, LowerCasePipe, CurrencyPipe, and PercentPipe

 

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';
import {MyCalculationPipe} from './my-calculation.pipe';

@Component({
  // we will use this Tag to Call our Component
  selector: 'angular-2-pipe',

  // The Template used in this Component
  template:`
            <!--we transform the yourName with an Angular 2 Pipe : uppercase -->     
            <h3>Hallo {{yourName | uppercase}}</h3>
            
                    
            `,
  pipes: [MyCalculationPipe]          
})
export class Angular2Pipe {

  // variable declaration yourName in lowercase
  yourName: string = 'everybody';
  
  AnnaBirthday = new Date(1982,2,28); // March 15, 1988
}

/*
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/ 
*/

 

 

Let’s see another Built-in Pipe example date this time we will use what we call Parameterizing Pipes.

We pass a parameter to our Pipe:

 

 <h3>Hi Anna Jackson   {{  AnnaBirthday | date:'fullDate' | uppercase}} </h3>

In the previous example we have seen what we call Chaining pipes.

pipe1 | pipe2 | pipe3

 

Custom Pipes
Custom Pipes

Let’s create our Custom Pipe : ) .

Our Pipe is MyCalculationPipe. It accept a number ( N ) and returns a : (N *10/2.6) *86- N /74.

 

  • @Pipe: to indicate the name of our Pipe.
  • Implements PipeTransform: we will write the body of our transformer transform ().
  • The first arg is the value to transform; the second is the pipe parameter.

file name : my-calculation.pipe.ts

 

 
/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
    import {Pipe, PipeTransform} from 'angular2/core';
 
    @Pipe({name: 'myCalculation'})
    export class MyCalculationPipe implements PipeTransform {
      transform(value:number, args:string[]) : any {
        return (value * 10 / 2.6 ) * 2 - parseInt(args[0] || '1', 10) / 3;
      }
    }
/*
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/ 
*/

How to call our custom Pipe?

 
<h3>Custom Pipes</h3>
<div>
    Test our Custom Pipe :) : {{ 3 | myCalculation: 1}}
</div> 

In part 2 of this tutorial we will see: the two kinds of pipes we have in angular:

Stateless pipes and Stateful pipes.

 

Done !