Pipes

Transform displayed values directly in a template using Angular's built-in pipes and the pipe chaining syntax.

What Is a Pipe?

A pipe transforms a value for display, right inside a template, using a | (vertical bar) syntax — inspired by Unix shell pipes. It never changes the underlying data, only how it appears on screen.

<p>{{ birthday | date }}</p>
<p>{{ price | currency }}</p>
<p>{{ name | uppercase }}</p>

Common Built-in Pipes

Pipe	Purpose	Example
date	Formats a Date object	{{ today \| date:'longDate' }}
currency	Formats a number as currency	{{ 24.99 \| currency:'USD' }}
uppercase / lowercase	Changes text case	{{ name \| uppercase }}
decimal (number)	Controls decimal places	{{ pi \| number:'1.2-2' }}
json	Pretty-prints an object as JSON — useful for debugging	{{ user \| json }}
async	Automatically subscribes to an Observable or Promise	{{ data$ \| async }}

Pipe Parameters

A colon after a pipe name passes configuration to it — many built-in pipes accept one or more parameters this way.

<p>{{ birthday | date:'MM/dd/yyyy' }}</p>
<p>{{ price | currency:'EUR':'symbol' }}</p>

Chaining Pipes

Multiple pipes can chain together, each one transforming the output of the one before it, left to right.

<p>{{ name | lowercase | titlecase }}</p>

The async Pipe Is Especially Powerful

The async pipe subscribes to an Observable (or Promise) automatically, updates the template whenever it emits, and unsubscribes automatically when the component is destroyed — removing a whole category of manual subscription management, covered further in the RxJS lessons.

Common Beginner Mistakes

Forgetting to import CommonModule for built-in pipes

Like ngClass/ngStyle, most built-in pipes come from CommonModule — a standalone component needs it in its imports array.

Doing the same expensive transformation in multiple places instead of a pipe

A custom pipe (covered in a later lesson) centralizes and can even cache a transformation, rather than repeating the same logic across templates.

FAQs

Do pipes re-run on every change detection cycle?

By default, "pure" pipes (the default) only re-run when their input reference actually changes, making them efficient — "impure" pipes can be configured to run more often, but are rarely needed.

Can I write my own pipe?

Yes — custom pipes are covered in a dedicated lesson later in this course, alongside custom directives.

Summary

Pipes transform values for display without mutating the underlying data, and chain together cleanly for multi-step transformations. With template fundamentals covered, the next section moves into how components communicate with each other.

Next Lesson →