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

Useful Video Courses


AngularJS Online Training

16 Lectures 1.5 hours

Anadi Sharma


Angular 2 Online Training

28 Lectures 2.5 hours

Anadi Sharma


Step By Step Angular For Beginnners

Best Seller

11 Lectures 7.5 hours



Ionic & Angular JS: Principles Of Mobile and Web Development

16 Lectures 2.5 hours

Frahaan Hussain


Angular 8 Full Stack Development With Spring Boot

Best Seller

69 Lectures 5 hours

Senol Atac


JWT Role Based Authorization With Spring Boot And Angular 8

53 Lectures 3.5 hours

Senol Atac