Pipes transform data for display directly in templates, using the | operator. They let you format values (dates, currency, text) without changing the underlying data or writing transformation logic in the component.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
The value on the left is passed through the pipe; arguments follow a colon (date:'longDate').
<p>{{ today | date:'fullDate' | uppercase }}</p> <!-- pipes apply left to right -->
<!-- subscribes to an Observable/Promise and auto-unsubscribes -->
<div>{{ user$ | async }}</div>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
async is especially important: it subscribes to an Observable (e.g. an HTTP result), renders the emitted value, and automatically unsubscribes when the component is destroyed — preventing memory leaks without manual subscription management.
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "truncate" })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 20): string {
return value.length > limit ? value.slice(0, limit) + "…" : value;
}
}
// usage: {{ longText | truncate:50 }}
Pure (default): re-runs only when the input REFERENCE changes → efficient (cached)
Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering)
Pure pipes are cached and only recompute when their input changes — making them performant.
Pipes keep data formatting declarative and in the template where it belongs, separate from component logic — reusable, chainable, and (when pure) efficient.
The built-in pipes cover common formatting, custom pipes handle app-specific transforms, and the async pipe is the idiomatic, leak-free way to display Observable data — a pattern you'll use constantly in Angular.