Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

Transforming data with parameters and chained pipes

Some pipes have optional parameters to fine-tune the pipe's output.

For example, the CurrencyPipe accepts a country code as a parameter. To specify the parameter, follow the pipe name (currency) with a colon (:) and the parameter value (a country code).

The template expression {{ amount | currency:'EUR' }} displays the amount, prefixed with the Euros symbol (€).

Some pipes accept multiple optional parameters. Pass each parameter to the pipe, separated by colons.

For example, {{ amount | currency:'EUR':'Euros '}} displays the amount with the label "Euros" (the second parameter) instead of the Euros symbol.

Some pipes, such as SlicePipe, require at least one parameter and may allow more optional parameters.

The expression {{ anArray | slice:1:5 }} displays a new string containing a subset of the elements starting with element 1 and ending with element 5.

Example: Formatting a date

The following example demonstrates two ways to format a hero's birthdate with the DatePipe.

      
      <p>The hero's birthday is {{ birthday | date:"shortDate" }} in the "shortDate" format.</p>

<p>The hero's birthday is {{ birthday | date:format }} in "{{format}}" format.
  Click the toggle button to change formats.</p>

<button type="button" (click)="toggleFormat()">Toggle Format</button>
    

In the template, the first expression passes the birthdate to the DatePipe with a literal date format parameter, "shortDate". The output is 04/15/88.

The second expression passes the birthdate to the DatePipe with a date format parameter bound to a component property (format).

Clicking the "Toggle" button switches that property value between two of the many possible pre-defined formats, 'mediumDate' and 'fullDate'. The output is either April 15, 1988 or Friday, April 15, 1988.

The page displays the birthdate in the specified format.

Example: Chaining two pipes together

Connect multiple pipes, using "pipe chaining syntax", so that the output of one pipe becomes the input to the next.

The following example passes the birthdate to the DatePipe and then forwards the result to the UpperCasePipe pipe, using "pipe chaining syntax".

Once again, it demonstrates the DatePipe both with and without a format parameter. Note that both results (APR 15, 1988 and FRIDAY, APRIL 15, 1988) are in uppercase.

      
      <p>
  The chained hero's uppercase birthday is
  {{ birthday | date | uppercase}}
</p>

<p>
  The chained hero's uppercase birthday in "fullDate" format is
  {{ birthday | date:'fullDate' | uppercase}}
</p>
    

Switch to the class file to see that this is a standalone component; it imports the two pipes from @angular/common, the source of all built-in pipes.

Last reviewed on Mon Aug 14 2023