Skip to main content

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

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

В Angular <ng-container> - це віртуальний контейнер, який не створює додаткового елемента в DOM, але дозволяє групувати елементи та застосовувати до них структурні директиви (*ngIf, *ngFor та ін.).

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

  1. Немає власного рендерингу:
html
<ng-container *ngIf="isVisible"> <p>Елемент 1</p> <p>Елемент 2</p> </ng-container>
  • Якщо isVisible = true, обидва <p> відображаються.
  • У DOM не створюється тег <ng-container>, лише самі <p>.
  1. Групування з директивами:
  • Дозволяє застосовувати директиву до декількох елементів одночасно.
  • Без <ng-container> довелося б обгортати їх у <div> чи інший тег, створюючи зайву структуру.
  1. Використовується з ng-template та локальними змінними:
html
<ng-container *ngFor="let item of items"> <p>{{ item.name }}</p> </ng-container>
  • Ітерація працює без додавання зайвого елемента-обгортки.

Підсумовуючи: <ng-container> - це логічний контейнер для шаблонної розмітки, який не впливає на DOM, але дає Angular можливість застосовувати директиви та змінні на групу елементів.

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

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

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

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