Pipes — Format Values Inline

Pipes transform values inside templates — formatting dates, numbers, currencies, and unwrapping observables.

4 min read Level 2/5 #angular#templates#pipes

What you'll learn

Use built-in pipes like date, currency, json, async, uppercase
Chain pipes together
Pass arguments after a colon

Pipes are template-only functions that transform values just before they’re rendered. They keep your component logic free of formatting concerns and stay readable inline.

The Most Useful Built-Ins

<p>{{ now | date:'short' }}</p>           <!-- 5/12/26, 11:23 AM -->
<p>{{ price | currency:'USD' }}</p>       <!-- $19.99 -->
<p>{{ name | uppercase }}</p>             <!-- ADA -->
<p>{{ name | lowercase }}</p>             <!-- ada -->
<p>{{ items.length | number:'1.0-0' }}</p>
<p>{{ payload | json }}</p>               <!-- pretty-print for debugging -->

To use these pipes in a standalone component, import the relevant pipe classes from @angular/common (or the whole CommonModule).

Chaining

Pipes compose left-to-right:

<p>{{ name | uppercase | slice:0:3 }}</p>
<p>{{ today | date:'fullDate' | uppercase }}</p>

Pipe Arguments

A colon separates arguments. Multiple args chain with more colons:

{{ now | date:'yyyy-MM-dd' }}
{{ amount | currency:'EUR':'symbol':'1.2-2' }}
{{ list | slice:0:5 }}

async — The Magic One

async subscribes to an Observable or Promise, renders its latest value, and unsubscribes when the component is destroyed:

<p>{{ user$ | async | json }}</p>

@if (user$ | async; as user) {
  <p>Hello {{ user.name }}</p>
}

You almost never call .subscribe() in a component when you can pipe through async instead — no leaks, no boilerplate.

Performance: Pure by Default

Built-in pipes are pure — they only recompute when the input’s identity changes. That’s why pipes are usually cheaper than a method call from a template.

Custom Pipes →