The async Pipe
Subscribe in templates without manual cleanup.
The async Pipe is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What the async pipe does
The async pipe subscribes to an Observable (or Promise) in the template, renders the latest emitted value, and automatically unsubscribes when the component is destroyed.
Basic usage
Bind an observable directly in the template and pipe it through async.
@Component({
template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
message$ = of('Hello from RxJS');
}Rendering objects with async
It works with any emitted type. Combine with other pipes like json or date.
user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>Avoid multiple subscriptions
Each async use creates a subscription. Using it many times on the same observable triggers multiple HTTP calls. Use the as syntax to subscribe once.
<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
</div>With the new control flow
In modern Angular, use @if with as for the same single-subscription pattern.
@if (user$ | async; as user) {
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
}Null while pending
Before the first emission, async yields null. Handle the loading state explicitly.
@if (data$ | async; as data) {
<list [items]="data" />
} @else {
<p>Loading...</p>
}No manual unsubscribe needed
The pipe unsubscribes on destroy automatically, eliminating a whole class of memory leaks. This is why it is the preferred way to consume observables in templates.
Switching observables
If the bound observable reference changes, the async pipe unsubscribes from the old one and subscribes to the new one automatically.
search(term: string) {
this.results$ = this.http.get('/api/search?q=' + term);
// async pipe swaps subscriptions for you
}Async pipe with BehaviorSubject
Pairing a BehaviorSubject service with the async pipe gives a clean reactive UI with no manual subscription code.
// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>Async pipe vs toSignal
Both auto-manage subscriptions. The async pipe lives in the template; toSignal() brings the value into component code as a signal. Choose based on where you need the value.
import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}Best practice summary
Prefer the async pipe (or toSignal) over manual subscription in components. Use as to avoid duplicate subscriptions, and always handle the initial null/loading state.
Quick Check
Test your understanding of the async pipe.
Recap: The Async Pipe
The async pipe subscribes in the template and cleans up on destroy.
- Use
as(with @if or *ngIf) to subscribe once. - It yields null before the first emission — handle loading.
- Preferred over manual subscriptions for templates.
You have completed RxJS Fundamentals.
Frequently asked questions
Is the “The async Pipe” lesson free?
Yes — the full text of “The async Pipe” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “The async Pipe”?
Subscribe in templates without manual cleanup. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The async Pipe” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.