Angular › Pipes (Built-in & Custom)

How does the async pipe simplify working with observables directly in an Angular template?

Intermediate

Answer

The async pipe automatically subscribes to an observable or promise, displays its most recently emitted value, and automatically unsubscribes when the component is destroyed, saving you from manually managing subscriptions and reducing the risk of memory leaks from forgotten unsubscribe calls.

@Component({
  selector: 'app-user-list',
  template: `<ul><li *ngFor="let user of users$ | async">{{ user.name }}</li></ul>`
})
export class UserListComponent {
  users$ = this.userService.getUsers();
}

Real-world example A user list component displays data from an observable directly in its template using the async pipe, completely avoiding the need to manually subscribe and unsubscribe inside the component's TypeScript code.

Common follow-ups: What happens to the subscription created by the async pipe when the component is destroyed?;Can you use the async pipe more than once on the same observable within the same template?

RxJS & Observables;Lifecycle Hooks