Detailed explanation of the operation of using ng-container element in Angular

Introduction

ng-containeris an element available in Angular 2+ that can be used as a host of structural instructions.

In this article, you will discuss what you can useng-containerSolved scenarios.

Prerequisites

If you want to learn from this article, you need:

• Familiar with the structure of DOM. To learn more, check out the tutorial series Understanding DOM.
• It may be helpful to have some understanding of Angular templates and structure directives.

Use ng-container to avoid redundant elements

In Angular, you cannot use multiple template bindings on one element.

The following is combined*ngIfand*ngForExamples of structure instructions will not be compiled through:

[secondary_label Invalid example]
<div *ngIf="todos" *ngFor="let todo of todos">
  {{  }}
</div>

Attempting to compile this code will result in the following error:

[secondary_label invalid sample output]
There is no way to have multiple template bindings on one element. Only one attribute with * prefix can be used

One workaround is to separate the template bindings and create a wrapper:

[secondary_label Valid examples]
<div *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{  }}
  </div>
</div>

One of the disadvantages is that this method will introduce redundancy in the DOMdivElements:

[secondary_label Valid example output]
<div>
  <div>
    To-do content 1
  </div>
  <div>
    To-do content 2
  </div>
  <div>
    To-do content 3
  </div>
</div>

This isng-containerWhere elements become useful.

The following example behaves exactly the same, but does not add any extra elements to the DOM at runtime:

[secondary_label Improved valid examples]
<ng-container *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{  }}
  </div>
</ng-container>

This will produce the following markup:

[secondary_label Improved sample output]
<div>
  To-do content 1
</div>
<div>
  To-do content 2
</div>
<div>
  To-do content 3
</div>

ng-containerIn usengIfIt is also useful when it comes to inline content:

[secondary_label Example]
<div>
  <span *ngIf="error">Oops：</span> {{ message }}
</div>

iferrorTrue, this will produce the following markup:

[secondary_label Sample output]
<div>
  <span>Oops：</span> An error occurred。
</div>

WillspanReplace elements withng-containerWill reduce redundancy added to the DOMspanElements:

[secondary_label Improved examples]
<div>
  <ng-container *ngIf="error">Oops：</ng-container> {{ message }}
</div>

iferrorTrue, this will produce the following markup:

[secondary_label Improved sample output]
<div>
  Oops：An error occurred。
</div>

Reducing the amount of tags in your application will eventually lead to smaller DOM trees and help avoid the side effects of cascading stylesheet selectors.

Use ng-container to ensure valid HTML standards

In usedivorspanIf the valid HTML tag is not in compliance withng-containerIt can also solve the problem of invalid HTML tags.

The following example will produce invalid HTML because the expectationliThe element isulDirect child elements of an element:

[secondary_label Invalid example]
<ul>
  <div *ngFor="let todo of todos">
    <li *ngIf=" !== 'Done'">
      {{  }}
    </li>
  </div>
</ul>

WilldivReplace withng-containercan solve this problem:

[secondary_label Valid examples]
<ul>
  <ng-container *ngFor="let todo of todos">
    <li *ngIf=" !== 'Done'">
      {{  }}
    </li>
  </ng-container>
</ul>

Having effective HTML will meet stricter testing and requirements and ensure support on a variety of browsers and devices.

in conclusion

In this article, you discussedng-containerIssues solved in Angular applications such as redundant elements and invalid HTML standards.

This is the end of this article about the detailed explanation of the operation of using ng-container elements in Angular. For more related content on using ng-container in Angular, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!