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

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

который будет возвращен в дерево компонентов при сборке и будет занимать дополнительное место, лучше использовать ng-контейнер — собственно, в этом его суть!

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

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

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

 
  

You are now logged in.

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

  1. Использовать *ngFor

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


{{ item.title }}

{{ item.description }}

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

  1. Использовать ngSwitch

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

Success!

Your operation was successful.

Error!

There was an error processing your request.

Processing...

Please wait while we process your request.

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

Заключение:

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

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

ЧИТАТЬ   Депутат Госдумы Андрей Колесник может быть лишен мандата

Это пироги.

Source

От admin