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 { } }
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.
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.
”;