Angular Pipes

We need to follow these steps to create Custom Pipe. here, I am creating FilterPipe for example.

1. Angular Pipes are the class with @Pipe decorator. so first create a class in a different file with @Pipe Decorator.
   here, I have created FilterPipe class in filter.pipe.ts file (separate file).

   import { Pipe } from '@angular/core';
   
   @Pipe({
     name: 'filter'
   })
   export class FilterPipe {
   
   }

   name in @Pipe metadata is used to represent this pipe on HTML template.

2. Now implement PipeTransform interface from @angular/core package, which comes with transform() abstract method.
   

   import { Pipe, PipeTransform } from '@angular/core';
   
   @Pipe({
     name: 'filter'
   })
   export class FilterPipe implements PipeTransform {
     transform(value: any, ...args: any[]) {
       throw new Error("Method not implemented.");
     }
   }
   

   transform() method has one mandatory parameter, which is the input value, and other optional parameters. we can change this method, as per our requirement.

3. Now update the transform() method :
   

   import { Pipe, PipeTransform } from '@angular/core';
   
   @Pipe({
     name: 'filter'
   })
   export class FilterPipe implements PipeTransform {
   
     transform(array: string[], startWith: string): any {
       let temp: string[] = [];
       temp = array.filter(a => a.startsWith(startWith));
       return temp;
     }
   
   }

   Here I want to filter string from the list, so input is a string array, and startWith is one parameter.

4. Now our pipe is ready to use, but before that, we need to register it in @NgModule declarations section.
   

   import { FilterPipe } from './filter.pipe';
   
   @NgModule({
     declarations: [
       ...
       FilterPipe
     ],
       ...
   })
   export class AppModule { }