Angular 12 References/ Templates
🍀 Angular References
Oleksa Novyk | GitHub

@Pipe

You can create your own custom pipes.

The pipe class implements the PipeTransform interface's transform method that accepts an input value followed by optional parameters and returns the transformed value.

Source
@Pipe({name: 'multi'})
export class MultiPipe implements PipeTransform {
  transform(value: number, multiplier: number = 2): number {
    return value * multiplier;
  }
}

<div>{{ 2 | multi }}</div>
<div>{{ 10 | multi:5 }}</div>
Result
4
50

Note the following:

  • You use your custom pipe the same way you use built-in pipes.
  • You must include your pipe in the declarations array of the AppModule or in a module where you need it.
Links & Tutorials