Angular's `async` Pipe: Manage Observables in Templates

Why it exists

Managing asynchronous data in a declarative template is tricky. Without the async pipe, you must manually subscribe to observables in your component's code, store the emitted value in a property, and remember to unsubscribe to prevent memory leaks. This adds boilerplate code and significant risk of bugs.

The mental model

The async pipe is a declarative subscription manager for your view. Instead of telling your component how to get and clean up data (imperative), you tell your template what data stream to display (declarative). The pipe handles the implementation details of subscribing, updating, and unsubscribing for you.

How it works

When you apply | async to an Observable or Promise in your template, the pipe subscribes to it. Each time the stream emits a new value, the pipe receives it and marks your component to be checked for changes, causing the view to update. When the component is destroyed, the pipe's ngOnDestroy lifecycle hook is called, and it automatically unsubscribes from the stream. If the observable reference itself changes, it cleans up the old subscription and starts a new one.

When to use it

Use it whenever you need to display data from an Observable or Promise in your template. This is the standard practice for data from HTTP requests (HttpClient), reactive forms (valueChanges), or state management libraries like NgRx. It keeps your component logic clean and simple.

When not to use it

Avoid using it if an emitted value needs to trigger complex side effects within your component's TypeScript code. In that case, subscribing manually can be clearer. Also, if you need the same value in multiple places, use the *ngIf="myObservable$ | async as myValue" syntax to create a single subscription and reuse the unwrapped value within that template block.

One canonical example

A component fetches user data from an API, which returns an Observable<User>. Instead of subscribing in ngOnInit, you assign the observable directly to a property: user = this.userService.getUser(1);. In the template, you display the user's name with {{ (user | async)?.name }}. The pipe handles the subscription, waits for the data, displays the name, and cleans up automatically. The ? provides safe navigation since the initial value is null.