Angular 2 Pipe : Create a custom Angular 2 Pipe

In this article, we will talk about Angular 2 Pipe. In Angular 2, we have lots of Pipes but in your project development cycle, you will withstand a situation where you would like to create your own pipe. Here, we will understand how to create a new Angular 2 Pipe and how to use them our templates.

 Download

 Demo

Setting up our Application

Let’s use Angular CLI to setup our application. If you don’t have Angular CLIinstalled on your machine run the below command to install it globally.
npm install -g angular-cli
After Angular CLI installation,to create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

ng new AppName

Angular 2 Pipe

Ready with Angular CLI ?

Now to run the below command to create an Angular 2 Pipe.

ng g -g pipe nameOfThePipe

In this application, we will create 2 Pipes listed below,

1. AgeMultiplier : To manipulate the age of users.
2. emailConcat : To concat Email: string with the email address of the user.

So let’s create these Pipes,run the below command,

1. ng g -g pipe ageMultiplier : To create AgeMultiplier Pipe.
2. ng g -g pipe emailConcat : To create emailConcat Pipe.

Cool, now you can use your created pipe in your application anywhere and in any template.

You know why ? because when you useAngular CLI for your Angular2 projects, it automatically adds the declaration in @NgModule decorator. Check out app.modules.tsfile.

app.modules.ts:

/*
* Angular 2 pipes
* @autthor Shashank Tiwari
*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { EmailConcatPipe } from './email-concat.pipe';
import { AgeMultiplierPipe } from './age-multiplier.pipe';


@NgModule({
    declarations:[ AppComponent, EmailConcatPipe, AgeMultiplierPipe ],
    imports:[ BrowserModule ],
    providers: [],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

The application

Before using our created Pipes let’s first take a look at our application, where we have a list of users.

app.component.ts:

/*
* Angular 2 pipes
* @autthor Shashank Tiwari
*/
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})


export class AppComponent {

public title:string = 'Angular 2 pipes';
private  usersList = [];


constructor() {
this.usersList = [
{
            id: "c200",
            name: "Shashank Tiwari",
            email: "shashank@codershood.info",
            age: 20
        },
        {
            id: "c201",
            name: "Johnny Depp",
            email: "johnny_depp@gmail.com",
            age: 45
        },
        {
            id: "c202",
            name: "Leonardo Dicaprio",
            email: "leonardo_dicaprio@gmail.com",
            age: 45
        },
        {
            id: "c203",
            name: "John Wayne",
            email: "john_wayne@gmail.com",
            age: 35
        },
        {
            id: "c204",
            name: "Angelina Jolie",
            email: "angelina_jolie@gmail.com",
            age: 40
        }
    ];


}
}

app.component.html:

<!-- 
Angular 2 pipes
@autthor Shashank Tiwari
-->

<ul class="list-group">
<li *ngFor="let user of usersList" 
class="list-group-item" >
{{ user.name}} 
<h6 class="email"> {{ user.email }} </h6>
<h6 class="email"> Age : {{ user.age }} </h6>
</li>
</ul>

Using Angular 2 Pipe

Now let’s use our created pipes one by one.

Using emailConcat Pipe:

Open email-concat.pipe.ts file and replace the code by below code.

In the below code,

1. We are returning the email address by concating the Email: to the left.
2. The transform method takes the arguments as a string in this case and returns a string.

email-concat.pipe.ts:

/*
* Angular 2 pipes
* @autthor Shashank Tiwari
*/
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'emailConcat'
})
export class EmailConcatPipe implements PipeTransform {
transform(value: string): string {
return 'Email : '+ value
}
}

Now in template file,
We have to use PIPE( | ) operator to use the pipe as shown in below code.
app.component.html:

<!-- 
Angular 2 pipes
@autthor Shashank Tiwari
-->

<ul class="list-group">
<li *ngFor="let user of usersList" 
class="list-group-item" >
{{ user.name}} 
<h6 class="email"> {{ user.email | emailConcat }} </h6>
</li>
</ul>

Using ageMultiplier pipe:

Here, we will understand how to pass a parameter to the Pipe. Now open the age-multiplier.pipe.ts file and replace code by below code.
In the below code,

The transform method we expect two parameters, the first parameter will be the default value and second parameter will be a multiplier which we will pass from the template.

age-multiplier.pipe.ts :

/*
* Angular 2 pipes
* @autthor Shashank Tiwari
*/

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'ageMultiplier'
})
export class AgeMultiplierPipe implements PipeTransform {
transform(value: number, multiplier?:  number): number {
return value + multiplier;
}
}

In the template file,
we will pass a parameter to the pipe, by using a colon ( : ) symbol a shown below.
app.component.html:

<!-- 
Angular 2 pipes
@autthor Shashank Tiwari
-->

<ul class="list-group">
<li *ngFor="let user of usersList" 
class="list-group-item" >
{{ user.name}} 
<h6 class="email"> {{ user.email | emailConcat }} </h6>
<h6 class="email"> Age : {{ user.age | ageMultiplier:2 }} </h6>
</li>
</ul>

Now run the app everything should work fine.

For now, that’s it. In this article, we understood below points,

1. How to create Angular 2 Pipe.
2. How to use them Angular 2 Pipe.
3. how to pass parameters to it.

If you like this article, consider sharing with your friends.