Angular Pipes

Angular Pipes

When displaying data in a template, it rarely arrives in the exact format the user wants to see.

You might have a raw timestamp that needs to be formatted as a readable date, or a number that needs a currency symbol.

Angular uses "Pipes" to instantly transform data formats directly within the HTML template.

Using Built-in Pipes

To apply a pipe, you use the vertical bar character | followed by the name of the pipe.

Angular comes with several extremely helpful built-in pipes, including uppercase, lowercase, date, currency, and percent.

<!-- Transforms "hello world" into "HELLO WORLD" -->
<p>{{ 'hello world' | uppercase }}</p>

<!-- Transforms a JavaScript Date object into a readable string -->
<p>Today is: {{ todayDate | date }}</p>

Parameterizing Pipes

Many pipes allow you to pass specific parameters to customize their output format.

You pass a parameter by appending a colon : after the pipe name, followed by the desired value.

<!-- Formats the date string to a 'shortDate' format (e.g., 6/15/26) -->
<p>{{ todayDate | date:'shortDate' }}</p>

<!-- Formats the number as EUR currency instead of default USD -->
<p>Price: {{ productPrice | currency:'EUR' }}</p>

Chaining Multiple Pipes

You are not restricted to just one transformation.

You can chain multiple pipes together so that the output of the first pipe becomes the input for the second!

<!-- Formats the date, and then converts that formatted string to ALL CAPS -->
<p>{{ todayDate | date:'fullDate' | uppercase }}</p>

The Json Pipe

When debugging an API response, the json pipe is a developer's best friend.

Instead of printing [object Object] to the screen, it outputs a perfectly formatted JSON string representation of your data variable!

Example: {{ myComplexObject | json }}