custom pipe angular 10 code example

Example 1: angular create custom pipe

// Create a custom pipe
// First run the command:
ng g pipe pipes/yourPipeName

// Then import and declare on your module
import { YourPipeNamePipe } from '../../pipes/your-pipe-name.pipe';
@NgModule({
  imports: [
...
  ],
  declarations: [ YourPipeNamePipe ]
})

// On your-pipe-name.pipe.ts
@Pipe({
  name: 'yourPipe'
})
...
transform(value: any, ...args: any[]): any {
   return "converted test message";
}

// On your xxx.component.html
{{"test" | yourPipe}} // prints "converted test message"

Example 2: command to create custom pipe in angular 6

ng generate pipe personName