ng-container

Специальный элемент, который может содержать структурные директивы, не добавляя новых элементов в DOM.

<ng-container> позволяет использовать структурные директивы без дополнительных элементов, гарантируя, что в DOM вносятся только изменения, заданные самими директивами.

Это не только немного повышает производительность, поскольку браузеру приходится отображать меньше элементов, но и помогает поддерживать чистоту DOM и стилей.

Например, это позволяет использовать структурные директивы, не нарушая стилизацию, зависящую от точной структуры DOM (например, при использовании flex-контейнеров, отступов, селектора дочерних элементов и т. д.).

Примечания по использованию

С директивами *NgIf

Один из распространённых вариантов использования <ng-container> — вместе со структурной директивой *ngIf. Благодаря специальному элементу можно создавать понятные и удобные в работе шаблоны.

Например, может потребоваться условно отображать несколько элементов, которые не обязательно должны находиться под одним корневым элементом. Это легко сделать, поместив их в такой блок:

<ng-container *ngIf="condition"> … </ng-container>

Также можно добавить оператор else вместе с <ng-template>:

<ng-container *ngIf="condition; else templateA"> … </ng-container>
<ng-template #templateA> … </ng-template>

Сочетание нескольких структурных директив

Нельзя использовать несколько структурных директив на одном элементе; если нужно применить несколько структурных директив, рекомендуется использовать отдельный <ng-container> для каждой из них.

Наиболее распространённый случай — сочетание *ngIf и *ngFor. Например, представим, что у нас есть список элементов, каждый из которых нужно отображать, только если выполнено определённое условие. Может возникнуть соблазн написать что-то вроде:

<ul>
    <li *ngFor="let item of items" *ngIf="item.isValid">
    {{ item.name }}
    </li>
</ul>

Как мы уже сказали, это не сработает. Вместо этого можно просто перенести одну из структурных директив на элемент <ng-container>, который будет содержать другую директиву, например:

<ul>
    <ng-container *ngFor="let item of items">
        <li *ngIf="item.isValid"> {{ item.name }}
        </li>
    </ng-container>
</ul>

Это сработает как задумано и не добавит в DOM ненужных элементов.

Дополнительные сведения см. в разделе одна структурная директива на элемент.

Использование вместе с ngTemplateOutlet

Директиву NgTemplateOutlet можно применять к любому элементу, но чаще всего её применяют к элементам <ng-container>. При их совместном использовании структура HTML и DOM становится понятной и простой для восприятия: дополнительные элементы не нужны, а представления шаблонов создаются в нужных местах.

Например, представим, что у нас есть большой HTML-документ, небольшую часть которого нужно повторить в разных местах. Простое решение — определить <ng-template> с повторяющимся HTML и при необходимости отображать его с помощью <ng-container> вместе с NgTemplateOutlet.

Например:

<ng-container *ngTemplateOutlet="tmpl; context: {$implicit: 'Hello'}" />

<ng-container *ngTemplateOutlet="tmpl; context: {$implicit: 'World'}" />

<ng-template #tmpl let-text>
    <h1>
    {{ text }}
    </h1>
</ng-template>

Дополнительные сведения о NgTemplateOutlet см. на странице документации API NgTemplateOutlets.