Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use Angular’s <ng-container> when template nodes need a shared structural directive or rendering location, but the rendered DOM must not gain a wrapper element. It can group sibling content, help nest structural directives, and host Angular-managed outlets. It is not a regular HTML element: Angular ignores attribute bindings and event listeners placed on it.
Does ng-container add an element to the DOM?
No. Angular treats <ng-container> as a template grouping point rather than a rendered HTML wrapper. For example:
<section>
<ng-container>
<h2>Account</h2>
<p>Manage your profile settings.</p>
</ng-container>
</section>The rendered heading and paragraph appear directly under <section>; there is no corresponding container element between them and the section. This can preserve DOM relationships that matter to CSS layout or other markup-dependent behavior. Angular notes that rendering fewer elements may have a very slight performance effect, but the main reason to use the construct is controlling template structure.
Angular permits directives on an <ng-container>, but does not render the container as a normal DOM host. Attribute bindings and event listeners placed on it are ignored, including ones applied through a directive. If you need a rendered element to carry attributes, respond to events, receive styling, or provide HTML semantics, use a real element such as <div> or <section>.
#1 Best Overall
How do I conditionally show multiple sibling elements?
Put the structural directive on the container and put all the sibling nodes it controls inside it. When the condition is false, Angular omits the contained group without leaving an extra wrapper behind.
<ng-container *ngIf="isSignedIn">
<h2>Welcome back</h2>
<p>Your dashboard is ready.</p>
</ng-container>This is useful when the siblings should appear or disappear together but cannot be placed inside an additional HTML element without changing the document structure. Angular’s ng-container guide also shows the same pattern with *ngFor when each iteration should emit several sibling nodes.
Can I put multiple structural directives on one element?
Not using structural-directive shorthand. An expression such as *ngFor is shorthand that Angular expands into an <ng-template>. Putting two shorthand structural directives on one element would require Angular to decide which template layer goes outside the other. The shorthand supports one structural directive per element.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Make the nesting explicit with an <ng-container>. For example, to iterate over items and conditionally render each list item:
Rank #3
<ul>
<ng-container *ngFor="let item of items">
<li *ngIf="item.visible">{{ item.name }}</li>
</ng-container>
</ul>The outer container handles iteration; the inner <li> handles the condition. The list items remain children of the list, with no extra wrapper around them. The layers can be reversed or adjusted when the desired logic differs, but the template should express the intended nesting rather than stacking structural shorthand on one element. Angular explains the shorthand expansion and the one-directive rule in its structural directives guide; its ng-container API reference documents using a container to make the layers explicit.
Can ng-container render a component or template?
Yes. Angular’s outlet directives can use a container as the location for dynamically selected content, without adding a wrapper to the rendered DOM.
Render a component with NgComponentOutlet
<ng-container *ngComponentOutlet="activeComponent"></ng-container>Here, activeComponent identifies the component Angular should render at that point. Use this when the component to display is selected dynamically.
Render a template with NgTemplateOutlet
<ng-container *ngTemplateOutlet="selectedTemplate"></ng-container>This renders the chosen template fragment at the container’s location. Angular’s guide covers both outlet patterns.
Provide a value to descendants
A directive applied to an <ng-container> can provide a value that descendant components or directives inject. This makes the container useful as a logical boundary for Angular behavior even though it does not become a DOM element. Because attributes and event listeners on the container are ignored, this is not a way to create an ordinary element host.
What is the difference between ng-container and ng-content?
They solve different template problems. Use <ng-container> to group nodes in your template or mark a location for Angular-managed rendering without adding a wrapper. Use <ng-content> inside a component template to mark where content supplied by the component’s caller should be projected.
| Construct | Purpose | Rendered wrapper | Directives and attributes |
|---|---|---|---|
<ng-container> |
Groups template nodes or marks an outlet location for Angular rendering. | No container element is added. | Directives can be applied; attribute bindings and event listeners on the container are ignored. |
<ng-content> |
Marks a projection point for caller-provided content in a component template. | It is a projection placeholder, not a wrapper for grouping template siblings. | Angular documents that it cannot receive directives, styles, or arbitrary attributes. |
Do not treat <ng-content> as a conditional substitute for <ng-container>. Angular warns that putting <ng-content> inside a control-flow block does not prevent the projected content from being instantiated. See Angular’s ng-content API and content projection guide for its projection behavior and constraints.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
