Angular 2 - Custom Pipes


Advertisements


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 { } 
} 

Where,

  • '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.

Multiplier

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

import { 
   Pipe, 
   PipeTransform 
} 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 { 
   Component 
} 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 {
   NgModule
} from '@angular/core';

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

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

import {
   MultiplierPipe
} 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

Advertisements
E-Books Store