ng-container в Ангулар - это структурная директива в Angular, которая позволяет создавать группы элементов без добавления дополнительного узла в DOM. Это полезно, когда нужно применить директиву или использовать условные конструкции или циклы *ngFor для группы элементов, но при этом не добавлять лишних тегов в разметку.

ng-container не является компонентом и не создает своего собственного экземпляра, поэтому к нему не получится доступ через ViewChild или ContentChild. Он просто действует как контейнер для элементов, которые вы хотите группировать. Поэтому вместо того чтобы использовать <div> который будет рендериться в дереве компонента при сборке и занимать лишнее место лучше использовать ng-container - собственно это и есть его суть!

А теперь к примерам ng-container:

1. Условное отображение элементов

Вы можете использовать ng-container для группировки элементов, которые должны отображаться или скрываться вместе. Например:

<ng-container *ngIf="isLoggedIn">  
  <h1>Welcome, {{ user.name }}!</h1> 
  <p>You are now logged in.</p>   
  <button (click)="logout()">Logout</button>
</ng-container>

В этом примере ng-container используется для группировки элементов h1, p и button. Если isLoggedIn равен true, то все элементы внутри ng-container будут отображены на странице. В противном случае, они не будут отображены.

2. Использование *ngFor

Вы можете использовать ng-container для группировки элементов, которые должны быть созданы с помощью *ngFor. Например:

<ng-container *ngFor="let item of items"> 
  <h2>{{ item.title }}</h2>  
  <p>{{ item.description }}</p> 
</ng-container>

В этом примере ng-container используется для группировки элементов h2 и p, которые создаются для каждого элемента массива items.

3. Использование ngSwitch

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

<ng-container [ngSwitch]="status">  
  <div *ngSwitchCase="'success'">     
    <h2>Success!</h2>   
    <p>Your operation was successful.</p>  
  </div>  
  <div *ngSwitchCase="'error'"> 
    <h2>Error!</h2>  
    <p>There was an error processing your request.</p> 
  </div>   
  <div *ngSwitchDefault>    
    <h2>Processing...</h2>   
    <p>Please wait while we process your request.</p>  
  </div> 
</ng-container>

В этом примере ng-container используется для группировки элементов div, которые отображаются в зависимости от значения переменной status.

Заключение:

ng-container - это полезная структурная директива, которая позволяет группировать элементы без добавления дополнительных узлов в DOM. Вы можете использовать ее для условного отображения элементов, создания элементов с помощью *ngFor и группировки элементов для использования с ngSwitch и *ngIf.

В следующей статья я расскажу как ng-container используют в связке с ng-template и ngTemplateOutlet. Подписывайся, чтобы следить!

Вот такие пироги.