Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке Async pipe?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Async pipe** - це Angular pipe, який підписується на Observable або Promise прямо в шаблоні, оновлює дані та автоматично відписується під час знищення компонента. **Ключове:** async pipe запобігає memory leaks і прибирає ручний subscribe/unsubscribe, тому вважається стандартним Angular-підходом для UI-даних.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЧудове питання - це одне з найчастіших запитань про Angular. ## Коротко (як на співбесіді) **Async pipe** - це Angular pipe, який **підписується на Observable або Promise у шаблоні й автоматично відписується під час знищення компонента**. Він також **оновлює шаблон при нових значеннях**. ## Розгорнуто `async` pipe дає змогу **не писати subscribe вручну**. Приклад: ```html <div>{{ user$ | async }}</div> ``` Angular: 1. підписується на `user$` 2. оновлює template при нових значеннях 3. робить unsubscribe в `ngOnDestroy` ### Еквівалент без async pipe Те, що довелося б писати: ```ts user?: User; ngOnInit() { this.user$.subscribe(u => this.user = u); } ngOnDestroy() { this.subscription.unsubscribe(); } ``` `async pipe` робить це автоматично. ## Робота з *ngIf Дуже типовий Angular-патерн: ```html <div *ngIf="user$ | async as user"> {{ user.name }} </div> ``` Це: - підписка - локальна змінна - авто-unsubscribe ## Що підтримує async pipe Він працює з: - Observable - Promise Наприклад: ```html <div>{{ promise | async }}</div> ``` ## Чому async pipe важливий На співбесіді важливо сказати: - запобігає memory leaks - спрощує код - автоматично тригерить change detection - стандартний Angular-підхід ## Типове follow-up запитання Дуже часто запитують: **Async pipe vs subscribe?** Відповідь: `async pipe` кращий для UI-даних, тому що: - немає ручного unsubscribe - менше коду - декларативний підхід `subscribe` використовують, коли потрібна **side-effect логіка**. ## Ще одне популярне питання **Чи працює async pipe з BehaviorSubject?** Так, тому що він працює з будь-яким Observable. ## Міні-приклад Angular-сервісу Дуже типовий патерн: ```ts users$ = this.http.get<User[]>('/api/users'); ``` Template: ```html <li *ngFor="let user of users$ | async"> {{ user.name }} </li> ``` Це вважається "чистим Angular-підходом".Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.