Angular 2 - Custom Pipes


Angular 2 also has the facility to create custom pipes. The general way to define a custom pipe is as follows.

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 


  • 'Pipename' − This is the name of the pipe.

  • Pipeclass − This is name of the class assigned to the custom pipe.

  • Transform − This is the function to work with the pipe.

  • Parameters − This are the parameters which are passed to the pipe.

  • Returntype − This is the return type of the pipe.

Let’s create a custom pipe that multiplies 2 numbers. We will then use that pipe in our component class.

Step 1 − First, create a file called multiplier.pipe.ts.


Step 2 − Place the following code in the above created file.

import { 
} from '@angular/core';  

@Pipe ({ 
   name: 'Multiplier' 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 

Following points need to be noted about the above code.

  • We are first importing the Pipe and PipeTransform modules.

  • Then, we are creating a Pipe with the name 'Multiplier'.

  • Creating a class called MultiplierPipe that implements the PipeTransform module.

  • The transform function will then take in the value and multiple parameter and output the multiplication of both numbers.

Step 3 − In the app.component.ts file, place the following code.

import { 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
export class AppComponent {  } 

Note − In our template, we use our new custom pipe.

Step 4 − Ensure the following code is placed in the app.module.ts file.

import {
} from '@angular/core';

import {
} from '@angular/platform-browser';

import {
} from './app.component';

import {
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]

export class AppModule {}

Following things need to be noted about the above code.

  • We need to ensure to include our MultiplierPipe module.

  • We also need to ensure it is included in the declarations section.

Once you save all the code changes and refresh the browser, you will get the following output.

Multiplier Output