What is the async pipe in Angular?

Why Interviewers Ask This

This is a classic screening question for Angular roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.

Answer

The async pipe subscribes to an Observable or Promise and returns its latest emitted value. When the component is destroyed, it automatically unsubscribes from the Observable — preventing memory leaks without manual subscription management. With Observable: // Component: users$ = this.userService.getUsers(); // Template: <ul><li *ngFor="let user of users$ | async">{{ user.name }}</li></ul>. With null check: <div *ngIf="user$ | async as user">{{ user.name }}</div> — the "as" syntax assigns the emitted value to a local template variable, preventing multiple subscriptions. With loading state: <ng-container *ngIf="users$ | async as users; else loading"> <app-user-list [users]="users"></app-user-list> </ng-container> <ng-template #loading><app-spinner></app-spinner></ng-template>. Benefits over manual subscribe: (1) Auto-unsubscribes on destroy; (2) Triggers change detection on new values; (3) Works naturally with OnPush change detection strategy (manual subscribe + property assignment won't trigger OnPush). Multiple uses: using users$ | async multiple times in the same template creates multiple subscriptions. Use the "as" syntax or shareReplay(1) to share one subscription. Async pipe in OnPush: one of the key reasons to use async pipe — it correctly marks the component for check when Observable emits.

Common Mistake

Candidates often give textbook answers here. Interviewers are more impressed when you relate the concept to a specific problem you solved in a real Angular project.