interface
An interface that is implemented by pipes in order to perform a transformation. Angular invokes the transform
method with the value of a binding as the first argument, and any parameters as the second argument in list form.
interface PipeTransform { transform(value: any, ...args: any[]): any }
transform() | ||||||
---|---|---|---|---|---|---|
|
value | any | |
args | any[] |
any
In the following example, TruncatePipe
returns the shortened value with an added ellipses.
import {Pipe, PipeTransform} from '@angular/core'; @Pipe({name: 'truncate'}) export class TruncatePipe implements PipeTransform { transform(value: string) { return value.split(' ').slice(0, 2).join(' ') + '...'; } }
Invoking {{ 'It was the best of times' | truncate }}
in a template will produce It was...
.
In the following example, TruncatePipe
takes parameters that sets the truncated length and the string to append with.
import {Pipe, PipeTransform} from '@angular/core'; @Pipe({name: 'truncate'}) export class TruncatePipe implements PipeTransform { transform(value: string, length: number, symbol: string) { return value.split(' ').slice(0, length).join(' ') + symbol; } }
Invoking {{ 'It was the best of times' | truncate:4:'....' }}
in a template will produce It was the best....
.
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/core/PipeTransform