Angular 9 Tutorial - 19 - Custom Pipes in Angular | How to create custom pipes in angular

In this video we will discuss about how to create a Custom Pipe in Angular. Let us understand this with custom pipe example.

The requirement is to implement a power calculator

@Pipe({
name:'exponential'
})
export class ExponentialPipe implements PipeTransform {
transform(value: number, exponent? : number) : number{
}
}

Code Explanation :
1. Import Pipe decorator and PipeTransform interface from Angular core

2. decorate "ExponentialPipe" class with Pipe decorator to make it an Angular pipe

3. name property of the pipe decorator is set to exponential. This name can then be used on any HTML page where you want this pipe functionality.

4. ExponentialPipe class implements the PipeTransform interface. This interface has one method transform() which needs to be implemented.

5. Notice the transform method has 2 parameters. value parameter will receive the number to which we want calculate the power and exponent parameter receives the exponent value. The method returns a number after calculating the power using Math.

if you see errors for Math and isNaN then change your typescript version from use VS code version to Use Workspace version.

@NgModule({
declarations: [
AppComponent,
HomeComponent,
ExponentialPipe
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

input type="number" #numref placeholder="Enter the number" [(ngModel)] = "num"

input type="number" #exponentref placeholder="Enter the exponent" [(ngModel)] = "exponent"

num : number;
exponent : number;

With Two way Binding:
num | exponential : exponent

With template reference variables or # variables



Search Tags
angular pipes | angular custom pipes | angular pipes example | angular pipe function | angular pipe async | custom pipes in angular 8 | custom pipes | custom pipes in angular | power calculator using custom pipes in angular