Skip to main content

What does <ng-container> do?

AngularJunior~1 min read
Suggest an edit

In Angular, <ng-container> is a virtual container that does not create an additional element in the DOM, but allows grouping elements and applying structural directives to them (*ngIf, *ngFor, etc.).

Main points

  1. No rendering of its own:
html
<ng-container *ngIf="isVisible"> <p>Element 1</p> <p>Element 2</p> </ng-container>
  • If isVisible = true, both <p> elements are displayed.
  • The <ng-container> tag is not created in the DOM, only the <p> elements themselves.
  1. Grouping with directives:
  • Allows applying a directive to several elements at once.
  • Without <ng-container>, you would have to wrap them in a <div> or another tag, creating an extra structure.
  1. Used with ng-template and local variables:
html
<ng-container *ngFor="let item of items"> <p>{{ item.name }}</p> </ng-container>
  • Iteration works without adding an extra wrapper element.

In summary: <ng-container> is a logical container for template markup that does not affect the DOM, but gives Angular the ability to apply directives and variables to a group of elements.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit