Angular: The ng-container Element

ng-container is an element that’s available in Angular 2+ and that can act as the host to structural directives.

You can’t use more than one template binding on an element. So you can’t combine structural directives like this:

<!-- Can't do this -->
<div *ngIf="todos" *ngFor="let todo of todos">
  {{ todo.content }}
</div>

Instead what we usually do is use a wrapper like this:

<div *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</div>

This is all well and good, but it adds a useless div element to the DOM. This is where the ng-container element becomes useful. The following behaves exactly the same, but without adding any extra element to the DOM at runtime:

<ng-container *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</ng-container>

And this is also really useful when using ngIf on inline content to avoid the need for a bunch of span elements. This…

<div>
  <span *ngIf="error">Oops:</span> {{ message }}
</div>

…can also be used like this:

<div>
  <ng-container *ngIf="error">Oops:</ng-container> {{ message }}
</div>

Avoiding the use of dumb span elements like that can help prevent having unwanted styles applied if some of your CSS rules would normally target them.


ng-container is not just a nicety, because in some cases your HTML markup wouldn’t be valid without it. This would output invalid HTML because only iu elements can be children of the ul element:

<ul>
  <div *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Get milk'">
      {{ todo.content }}
    </li>
  </div>
</ul>

ng-container saves the day once again there because the following will produce valid HTML:

<ul>
  <ng-container *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Get milk'">
      {{ todo.content }}
    </li>
  </ng-container>
</ul>
✖ Clear

🕵 Search Results

🔎 Searching...