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