Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteAngular’s <ng-container> lets you group sibling template nodes or mark a place for Angular-rendered content without adding a wrapper element to the rendered DOM. Use it when a structural directive should control several siblings, when directive layers need to be nested, or when an outlet needs a rendering location. It is not a normal HTML element: Angular ignores its attribute bindings and event listeners.
Does <ng-container> add an element to the DOM?
No. It groups template content during Angular rendering, but the container itself does not appear as a real element in the rendered DOM. For example:
As an Amazon Associate I earn from qualifying purchases.
<section>
<ng-container>
<h2>Profile</h2>
<p>Account details</p>
</ng-container>
</section>The rendered heading and paragraph sit directly inside <section>; there is no intervening <ng-container> node. This can preserve DOM relationships that matter to layout or styling. Angular describes any performance benefit from avoiding the extra element as very slight, not as a reason to expect a substantial speedup. Angular’s guide to ng-container and its API reference document this behavior.
How do you use it with *ngIf or *ngFor?
Conditionally render multiple siblings
Put the structural directive on the container and place every node it should control inside:
#1 Best Overall
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>When the condition is true, Angular renders both siblings without wrapping them in a new element. When it is false, it does not render that group.
Repeat a group of siblings
Use the same pattern with *ngFor when each iteration should produce several adjacent nodes rather than one wrapped item:
<ng-container *ngFor="let item of items">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</ng-container>Each iteration produces its heading and paragraph without an extra wrapper. The examples use structural-directive shorthand, which Angular expands into template instructions; the container is not a rendered host element.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsCan one element have both *ngFor and *ngIf?
Not using shorthand on the same element. Angular’s structural-directive shorthand supports one structural directive per element. The shorthand expands to an <ng-template>, and putting multiple structural directives there would leave Angular without an explicit way to determine their nesting. See Angular’s structural directives guide.
Rank #3
Make the nesting explicit with an outer container and an inner element:
<ng-container *ngFor="let item of items">
<li *ngIf="item.visible">{{ item.name }}</li>
</ng-container>Here, iteration is the outer layer and the condition applies to each list item. The resulting DOM contains only the visible <li> elements, without a wrapper around the list items. Change which directive is outermost if the intended nesting is different; directive nesting determines which layer is evaluated around the other. Angular’s API reference shows this approach for combining structural directives: ng-container.
Can it render a component or template?
Yes. An <ng-container> can mark where Angular should insert content managed by an outlet directive. For example:
Free tools Windows power users keep installed
One-click scans. No signup required.
<ng-container *ngComponentOutlet="currentComponent"></ng-container>
<ng-container *ngTemplateOutlet="selectedTemplate"></ng-container>NgComponentOutlet renders the selected component, while NgTemplateOutlet renders a selected template fragment at that location. The container serves as the template location rather than adding its own wrapper to the output. Angular’s guide includes both outlet patterns.
Can a directive on the container provide a value?
A directive can be applied to <ng-container> and provide a value for descendant components or directives to inject. This is useful when a group of template content needs a shared injection context but should not gain a wrapper element. The container is not a regular DOM host, however: Angular ignores attribute bindings and event listeners applied to it, including those applied through a directive. Use a real element when you need rendered attributes, event handling, styling on a host, or HTML semantics. Angular documents both the injection use and this limitation in its guide.
How is <ng-container> different from <ng-content>?
| Question | <ng-container> |
<ng-content> |
|---|---|---|
| What is it for? | Grouping template nodes or marking a location for Angular-managed rendering. | Marking where caller-provided content is projected inside a component template. |
| Does it add a wrapper element? | No. | No; it is a projection placeholder, not a wrapper for projected content. |
| Can directives or attributes be applied? | Directives can be applied, but Angular ignores attribute bindings and event listeners on the container. | Angular does not allow directives, styles, or arbitrary attributes on the projection placeholder. |
They solve different problems: use a container to group or locate Angular template content; use a projection placeholder to place content supplied by a component’s caller. Angular also warns against putting <ng-content> inside a control-flow block to conditionally show projected content, because Angular still instantiates that content. Consult the ng-content API and content projection guide for the projection behavior and constraints.
When should you use a real element instead?
Choose a semantic HTML element such as <ul>, <section>, or <div> when the markup needs an actual DOM node for semantics, styles, attributes, or event handling. Choose <ng-container> when the template needs a grouping or rendering boundary but the output should not contain another element. That distinction prevents a common mistake: treating the container like a normal host and expecting its bindings or listeners to work.
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.
