Angular Custom Pipe

Angular provides some default pipes but sometimes we need a pipe which is not exists then we create custom pipe.

There are some steps to create custom pipe. You can create custom pipe through Angular CLI command.

Step1) Firstly create a custom pipe through angular cli commend.
Syntax:-

ng g pipe pipeName

Example:- Suppose, You create a custom pipe to check number is even or odd.

ng g pipe checkNumberEvenOdd  

When you run the above command, then two files are created.

CREATE src/app/check-number-even-odd.pipe.spec.ts (238 bytes)
CREATE src/app/check-number-even-odd.pipe.ts (241 bytes) 

Step2) pipe is automatically included into the module file.

import { CheckNumberEvenOddPipe } from './check-number-even-odd.pipe';
@NgModule({
  declarations: [
    CheckNumberEvenOddPipe
  ]

Step3) Now, implement the logic that number is even or odd in the pipe file.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'checkNumberEvenOdd'
})
export class CheckNumberEvenOddPipe implements PipeTransform {

  transform(value: number): string {
    if(value %2 == 0){
      return 'even';
    }else{
      return 'odd';
    }
  }
}

Step4) Now, define the variable a which is numeric into the app-component.ts file.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  a : number = 5;
}

Step5) Now variable a pass into the template file like (app-component.html) with checkNumberEvenOdd pipe.

<div align="center">
    <h1>Check Number is Even or Odd</h1>
    <h2>{{a}} is {{a | checkNumberEvenOdd}}</h2>
</div>

Step6) Now run the URL on the browser

http://localhost:4200/

Step7) Now, get the output that when pass the number to check it is even or odd.