Условное отображение содержимого в Angular 2: ngIf без контейнера

Быстрый ответ

Если хотите отказаться от лишних элементов в DOM при условном отображении с помощью *ngIf, используйте <ng-container>:

<ng-container *ngIf="isVisible">Отобразится при истинности 'isVisible'</ng-container>

<ng-container> не оставляет следов в итоговой разметке и прекрасно служит для управления директивами типа *ngIf, сохраняя семантику HTML.

В глубину ng-container

Оптимальность и семантичность HTML-разметки – ключ к успешному созданию шаблонов в Angular. Директива <ng-container> служит скрытым инструментом для управления структурными директивами типа *ngIf и *ngFor, исключая лишние элементы из DOM.

Создание семантичных таблиц

В случае HTML-таблиц, имеющих условные строки, где теги <tr> прямо связаны с *ngIf, может возникнуть замешательство. Здесь на помощь приходит <ng-container>:

<tbody>
  <ng-container *ngIf="condition">
    <tr><td>Содержимое отображается при истинном условии</td></tr>
  </ng-container>
</tbody>

Такой подход позволяет наглядно соблюдать стандарты HTML при формировании таблиц.

Подробнее об этом расскажет наш спикер на видео

Забудьте о старом теге template

Ранее Angular для условного рендеринга использовал тег <template>. Однако технологии не стоят на месте, и теперь <ng-container> обеспечивает более современное решение.

Контроль циклов и асинхронности

При работе с циклами воспользуйтесь <ng-container> в связке с *ngFor, чтобы избежать создания лишних элементов:

<ng-container *ngFor="let item of items">
  <custom-element [item]="item"></custom-element>
  <!-- лишний 'div' в DOM не образуется 🥳 -->
</ng-container>

Для удобства асинхронных операций используйте async-пайп и *ngIf в <ng-container>:

<ng-container *ngIf="observableData | async as data"> 
  Качественное отображение {{ data.property }}
</ng-container>

Визуализация

<ng-container> можно сравнить с невидимой рамой для картины (🖼️), которую можно повесить на стену при помощи *ngIf, не требуя дополнительной опоры:

Angular *ngIf — без лишних элементов!
-------------------------------------
Картина: 🖼️
Стена:     🧱
Метод отображения: *ngIf

Как прикрепить картину непосредственно к стене:

<ng-container *ngIf="showPainting">
  <painting>🖼️</painting>
</ng-container>

Итак, благодаря <ng-container> не нужна лишняя опора для картины, позволяющая в полной мере наслаждаться процессом взаимодействия с искусством!

🧱🪝🖼️  Стена с картиной (ВИДИМО)
🧱     Голая стена      (НЕВИДИМО)

Используйте <ng-container> для сохранения эстетики и функциональности.

Становимся лучше в Angular

Глубокие знания Angular помогут в создании производительных и стильных приложений. <ng-container> идеально ложится в эту концепцию.

Манипуляции с элементами через ng-container

Возможности <ng-container> на практике:

• Условные классы: добаляйте классы без создания лишних элементов:

  HTML

  Скопировать код

  <ng-container *ngIf="shouldHighlight">
    <div [class.highlight]="true">Подсветка активируется при соответствующем условии. Как маяк!</div>
  </ng-container>
  <!-- Нет избыточного div! -->

  Запустить код

• Группировка элементов: группируйте элементы и обрабатывайте их под одним условием:

  HTML

  Скопировать код

  <ng-container *ngIf="showGroup">
    <div>Первый элемент</div>
    <div>Второй элемент</div>
  </ng-container>
  <!-- Элементы надежно сгруппированы. 'ng-container' держит всё под контролем -->

  Запустить код

Нюансы ng-container

Важные нюансы:

• Не следует злоупотреблять вложенностью <ng-container>, поскольку это может негативно сказаться на производительности приложения. Не забывайте про отмеренность!
• Используйте этот инструмент обдуманно. <ng-container> – это мощное средство, но не панацея!

Полезные материалы

1. Angular — Официальная документация Angular API по ngIf.
2. Angular ngIf: Полное руководство — Глубокий анализ продвинутых возможностей ngIf.
3. Angular ng-template, ng-container и ngTemplateOutlet: Подробная экскурсия — Полное погружение в мир ng-template, ng-container и других составляющих Angular.
4. Angular в Деталях — Исчерпывающий анализ применения ngIf в сравнении со свойством hidden (спойлер: ngIf выходит победителем).
5. Angular — Руководство по структурным директивам Angular.
6. Angular — Погружение в сущность директивы ngIf в Angular.