Angular 7 References/ Templates


This is the documentation for Angular 7.
You can switch to the latest version Angular 10.

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.

@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>

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