Suggest an editImprove this articleRefine the answer for “What is Async pipe?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Async pipe** is an Angular pipe that subscribes to an Observable or Promise directly in the template, updates the data, and automatically unsubscribes when the component is destroyed. **Key point:** async pipe prevents memory leaks and removes the need for manual subscribe/unsubscribe, which is why it's the standard Angular approach for UI data.Shown above the full answer for quick recall.Answer (EN)ImageA great question, one of the most common Angular interview questions. ## In short (as in an interview) **Async pipe** is an Angular pipe that **subscribes to an Observable or Promise in the template and automatically unsubscribes when the component is destroyed**. It also **updates the template on new values**. ## In detail The `async` pipe lets you **avoid writing subscribe by hand**. Example: ```html <div>{{ user$ | async }}</div> ``` Angular: 1. subscribes to `user$` 2. updates the template on new values 3. unsubscribes in `ngOnDestroy` ### The equivalent without async pipe What you would otherwise have to write: ```ts user?: User; ngOnInit() { this.user$.subscribe(u => this.user = u); } ngOnDestroy() { this.subscription.unsubscribe(); } ``` `async pipe` does this automatically. ## Working with *ngIf A very typical Angular pattern: ```html <div *ngIf="user$ | async as user"> {{ user.name }} </div> ``` This gives you: - a subscription - a local variable - auto-unsubscribe ## What async pipe supports It works with: - Observable - Promise For example: ```html <div>{{ promise | async }}</div> ``` ## Why async pipe matters In an interview, it's worth mentioning that it: - prevents memory leaks - simplifies the code - automatically triggers change detection - is the standard Angular approach ## A typical follow-up question Very often asked: **Async pipe vs subscribe?** Answer: `async pipe` is better for UI data because: - there's no manual unsubscribe - less code - a declarative approach `subscribe` is used when you need **side-effect logic**. ## Another popular question **Does async pipe work with BehaviorSubject?** Yes, because it works with any Observable. ## A mini example of an Angular service A very typical pattern: ```ts users$ = this.http.get<User[]>('/api/users'); ``` Template: ```html <li *ngFor="let user of users$ | async"> {{ user.name }} </li> ``` This is considered the "clean Angular approach."For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.