Transforming data with parameters and chained pipes

Use optional parameters to fine-tune a pipe's output. For example, use the CurrencyPipe with a country code such as EUR as a parameter. The template expression {{ amount | currency:'EUR' }} transforms the amount to currency in euros. Follow the pipe name (currency) with a colon (:) and the parameter value ('EUR').

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 element 1 and ending with element 5.

Example: Formatting a date

The tabs in the following example demonstrates toggling between two different formats ('shortDate' and 'fullDate'):

• The app.component.html template uses a format parameter for the DatePipe (named date) to show the date as 04/15/88.
• The hero-birthday2.component.ts component binds the pipe's format parameter to the component's format property in the template section, and adds a button for a click event bound to the component's toggleFormat() method.
• The hero-birthday2.component.ts component's toggleFormat() method toggles the component's format property between a short form ('shortDate') and a longer form ('fullDate').

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

template: `
  <p>The hero's birthday is {{ birthday | date:format }}</p>
  <button type="button" (click)="toggleFormat()">Toggle Format</button>
`

export class HeroBirthday2Component {
  birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
  toggle = true; // start with true == shortDate

  get format()   { return this.toggle ? 'shortDate' : 'fullDate'; }
  toggleFormat() { this.toggle = !this.toggle; }
}

Clicking the Toggle Format button alternates the date format between 04/15/1988 and Friday, April 15, 1988.

For date pipe format options, see DatePipe.

Example: Applying two formats by chaining pipes

Chain pipes so that the output of one pipe becomes the input to the next.

In the following example, chained pipes first apply a format to a date value, then convert the formatted date to uppercase characters. The first tab for the src/app/app.component.html template chains DatePipe and UpperCasePipe to display the birthday as APR 15, 1988. The second tab for the src/app/app.component.html template passes the fullDate parameter to date before chaining to uppercase, which produces FRIDAY, APRIL 15, 1988.

The chained hero's birthday is
{{ birthday | date | uppercase}}

The chained hero's birthday is
{{  birthday | date:'fullDate' | uppercase}}