Create Custom PIPE in Angular 9.0

Create Custom PIPE in Angular:-

Using this we can create our own PIPE which can be used in multiple views to change the properties of View Data at runtime.

Create .ts file under app and add it on app.module.ts file

Step to create Custom PIPE:-

1)  Right Click on app folder and create mypipe.ts file then create TypeScript class


import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'scssqr'
})
export class SquarePipe implements PipeTransform {
   transform(val : number) : number {
      return val*val;
   }
}

2)  Open app.module.ts file and Write Following Code:-

    import { SquarePipe } from './mypipe';

     Write   SquarePipe   under-declarations section

3)  Call Pipe on any HTML file under expression:-

      {{ 21|scssqr }}

...............................................................................................................................

We can create pipe using CLI

Open the command prompt and write following command:-

ng g p name