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