Angular Custom Pipe

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

How to 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.

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';
  declarations: [

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

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

  name: 'checkNumberEvenOdd'
export class CheckNumberEvenOddPipe implements PipeTransform {

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

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

import { Component } from '@angular/core';
  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>

Step6) Now run the URL on the browser


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