Overview

Pipes are simple functions that accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once. For example, you would use a pipe to show a price as NRs. 45,000 rather than the raw string format.

Using pipes

Angular provides built-in pipes as listed here. Let’s try one to convert text to uppercase.

To apply a pipe, use the pipe operator (|) within a template expression.

<!-- card.component.html -->
<mat-card-title>{{title | uppercase }}</mat-card-title>

Transforming data with parameters

Use optional parameters to fine-tune a pipe’s output. For example, use the DatePipe with a date format such as “MM/dd/yy” as a parameter.

The card.component.html template uses a format parameter for the DatePipe (named date) to show the date as 04/15/88.

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>

export class CardComponent {

  birthday = new Date(1988, 3, 15);
}

If the pipe accepts multiple parameters, separate the values with colons. For example, {{ amount | currency:'EUR':'Euros '}} adds the second parameter, the string literal 'Euros ', to the output string. Use any valid template expression as a parameter, such as a string literal or a component property.

Some pipes require at least one parameter and allow more optional parameters, such as SlicePipe. For example, {{ slice:1:5 }} creates a new array or string containing a subset of the elements starting with an element 1 and ending with an element 5.