Angular Pipes
Transforming data with pipes
Built-in Pipes
{{ text | uppercase }} # uppercase text
{{ text | lowercase }} # lowercase text
{{ date | date:'short' }} # format date
{{ price | currency:'USD' }} # format currency
{{ number | number:'1.2-2' }} # format number
JSON Pipe
{{ object | json }} # display as JSON
Slice Pipe
{{ array | slice:0:5 }} # slice array
Chaining Pipes
{{ text | lowercase | slice:0:10 }} # chain pipes
Custom Pipe
@Pipe({ name: 'exponential' })
export class ExponentialPipe implements PipeTransform {
transform(value: number, exponent = 1): number {
return Math.pow(value, exponent);
}
}
Generate Pipe
ng generate pipe exponential # CLI command
ng g p exponential # shorthand