How to Create Custom Pipes in Angular 10?

Now, let's see tutorial of how to create custom pipe in angular 10. we will help you to give example of angular 10 create custom pipe example. We will use angular custom pipe with arguments example. i explained simply about how to use custom pipe in angular 10 component. Alright, let’s dive into the steps.

I written step by step creating custom pipe in angular 10. we will use angular 10 command to create custom pipe in angular app.

You have to follow that command and i written very basic example so you will easily understand how pipe is work and what you can write logic in your custom pipe. So let's see both example so that will help you to create custom pipe in angular 10.

Example 1: Pipe without Parameters

We need to run following command to creating pipe in angular 10 application.

ng g pipe genderPipe

hari@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)

Now we need to write some logic on our custom pipe ts file. so let's write logic as i written for demo now.

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';
  }
   
}

now it should be import in module.ts file as bellow:

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

Now we need to create one array with some dummy records, so we will create new array in component ts file as like bellow:

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'
    }
  ]
}

Ok, now we can use 'genderPipe' custom pipe in html file, so let's write it.

app/app.component.html

<h1>Example from ItsolutionStuff.com</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>

Output:

Example 2: Pipe with Parameters

We need to run following command to creating pipe with parameters in angular 10 application.

ng g pipe genderLabelPipe

hari@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)

Now we need to write some logic on our custom pipe ts file. so let's write logic as i written for demo now.

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

Now we need to create one array with some dummy records, so we will create new array in component ts file as like bellow:

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'
    }
  ]
}

Ok, now we can use 'genderPipe' custom pipe in html file, so let's write it.

app.component.html

<h1>Example from ItsolutionStuff.com</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>

Now you can run your angular 10 app and check.

I hope it can help you...