@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 theAppModule
or in a module where you need it.