Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить <ng-template>?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`<ng-template>`** в Angular - елемент-шаблон, який сам по собі не рендериться в DOM, але містить розмітку, яку Angular може вставляти в DOM динамічно. **Ключове:** `<ng-template>` - це невидимий контейнер для розмітки, яку Angular може створювати та вставляти динамічно залежно від умов або даних.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняВ Angular `<ng-template>` - це **елемент-шаблон**, який **сам по собі не рендериться в DOM**, але містить розмітку, яку Angular може вставляти в DOM **динамічно**. ## Основні моменти 1. **Лінива загрузка/відкладений рендеринг**: ```html <ng-template #tpl> <p>Привіт, світе!</p> </ng-template> ``` - `<p>` не з'явиться в DOM, поки шаблон не буде явно використаний (`ngTemplateOutlet` або структурною директивою). 2. **Використання з** `*ngIf` **та** `*ngFor`: - Angular під капотом перетворює ці директиви на `<ng-template>` для керування вставкою елементів. 3. **Динамічне використання через** `ngTemplateOutlet`: ```html <ng-container *ngTemplateOutlet="tpl"></ng-container> ``` - Вставляє вміст шаблону у вказане місце. 4. **Контекстні змінні**: ```html <ng-template #tpl let-user> <p>{{ user.name }}</p> </ng-template> <ng-container *ngTemplateOutlet="tpl; context: { $implicit: currentUser }"></ng-container> ``` - Дозволяє передавати дані в шаблон через локальні змінні (`let-user`), включно з `$implicit`. Іншими словами, `<ng-template>` - це **невидимий контейнер для розмітки**, яку Angular може **створювати та вставляти динамічно** залежно від умов або даних.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.