Skip to main content

Що робить <ng-template>?

AngularJunior~1 хв читання
Запропонувати правку

В Angular <ng-template> - це елемент-шаблон, який сам по собі не рендериться в DOM, але містить розмітку, яку Angular може вставляти в DOM динамічно.

Основні моменти

  1. Лінива загрузка/відкладений рендеринг:
html
<ng-template #tpl> <p>Привіт, світе!</p> </ng-template>
  • <p> не з'явиться в DOM, поки шаблон не буде явно використаний (ngTemplateOutlet або структурною директивою).
  1. Використання з *ngIf та *ngFor:
  • Angular під капотом перетворює ці директиви на <ng-template> для керування вставкою елементів.
  1. Динамічне використання через ngTemplateOutlet:
html
<ng-container *ngTemplateOutlet="tpl"></ng-container>
  • Вставляє вміст шаблону у вказане місце.
  1. Контекстні змінні:
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 може створювати та вставляти динамічно залежно від умов або даних.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку