more_horiz
@angular/corecode
PipeTransform
interface
stable
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.
On this page
API
interface PipeTransform { transform(value: any, ...args: any[]): any;}
Usage Notes
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.....
Jump to details