Hello Devs,
In this tutorial, we are going to learn how to create custom pipe in angular 10.
We will use angular custom pipe with arguments example.
Given below are two examples to create custom pipe in angular 10.
Example 1:
Pipe without Parameters
ng g pipe genderPipehari@hari-pc:/var/www/me/ang/pipeApp$ ng g pipe genderPipe
CREATE src/app/gender-pipe.pipe.spec.ts (204 bytes)
CREATE src/app/gender-pipe.pipe.ts (213 bytes)
UPDATE src/app/app.module.ts (545 bytes)app/gender-pipe.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'genderPipe'
})
export class GenderPipePipe implements PipeTransform {
transform(gender: any): string {
if(gender == 0){
return 'Male';
}
return 'Female';
}
}app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { GenderPipePipe } from './gender-pipe.pipe';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, GenderPipePipe ],
bootstrap: [ AppComponent ]
})
export class AppModule { }app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'pipeApp';
persons = [
{
id: 1,
name: 'Hardik Savani',
gender: 0,
website: 'itsolutionstuff.com'
},
{
id: 2,
name: 'Kajal Patel',
gender: 1,
website: 'nicesnippets.com'
},
{
id: 3,
name: 'Harsukh Makawana',
gender: 0,
website: 'laracode.com'
}
]
}app/app.component.html
<h1>Example from Rathorji.in</h1>
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Website</th>
</tr>
<tr *ngFor="let person of persons">
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.gender | genderPipe }}</td>
<td>{{ person.website }}</td>
</tr>
</table>Example 2:
Pipe with Parameters
ng g pipe genderLabelPipehari@hari-pc:/var/www/me/ang/pipeApp$ ng g pipe genderLabelPipe
CREATE src/app/gender-label-pipe.pipe.spec.ts (225 bytes)
CREATE src/app/gender-label-pipe.pipe.ts (223 bytes)
UPDATE src/app/app.module.ts (555 bytes)gender-label-pipe.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'genderLabelPipe'
})
export class GenderLabelPipePipe implements PipeTransform {
transform(name: string, gender: any): string {
if(gender == 0){
return 'Mr. '+name;
}
return 'Miss. '+name;
}
}app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'pipeApp';
persons = [
{
id: 1,
name: 'Hardik Savani',
gender: 0,
website: 'itsolutionstuff.com'
},
{
id: 2,
name: 'Kajal Patel',
gender: 1,
website: 'nicesnippets.com'
},
{
id: 3,
name: 'Harsukh Makawana',
gender: 0,
website: 'laracode.com'
}
]
}app.component.html
<h1>Example from Rathorji.in</h1>
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Website</th>
</tr>
<tr *ngFor="let person of persons">
<td>{{ person.id }}</td>
<td>{{ person.name | genderLabelPipe:person.gender }}</td>
<td>{{ person.gender }}</td>
<td>{{ person.website }}</td>
</tr>
</table>I hope this example helps you.