Angular ng-container
February 12, 2024
This page will walk through Angular <ng-container>
example. To run structural directive, we need a root element and for that we can use <ng-container>
which is not added to DOM at runtime. The structural directives are ngIf
, ngFor
and ngSwitch
. The <ng-container>
is not added to DOM and this is useful because if we use <div>, <li> or any other HTML element as host element for ngIf
, ngFor
and ngSwitch
, the extra element is added to DOM. The <ng-container>
is also used to embed view with ngTemplateOutlet
.
Here on this page we will discuss
<ng-container>
example in detail step-by-step.
Contents
1. <ng-container> with ngIf
Ex-1: Find the sample use of<ng-container>
with ngIf
.
<ng-container *ngIf="isMsgShow"> <div> Hello World! </div> </ng-container>
<div> Hello World! </div>
<ng-container>
has not been added in DOM.
Now suppose we use <div> element as host of
ngIf
.
<div *ngIf="isMsgShow"> <div> Hello World! </div> </div>
ngIf
will be added to DOM.
<div> <div> Hello World! </div> </div>
Ex-2: While using <div> or <li> or any other element as host element for
ngIf
may create problem with styles.
Consider the following case without using
<ng-container>
.
<p> My name is Narendra. <span *ngIf="isMsgShow"> My message: {{msg}} </span> We should take care of each other. </p>
p span { color: red; font-size: 10; }
<p> My name is Narendra. <span> My message: World should unite. </span> We should take care of each other. </p>
Now use
<ng-container>
in the above example instead of <span> element.
<p> My name is Narendra. <ng-container *ngIf="isMsgShow"> My message: {{msg}} </ng-container> We should take care of each other. </p>
<p> My name is Narendra. My message: World should unite. We should take care of each other. </p>
2. <ng-container> with ngFor
Ex-1: Find the example to use<ng-container>
within HTML <table> element.
<table> <ng-container *ngFor="let user of users"> <tr *ngIf="user.isActive"> <td>{{user.id}}</td> <td>{{user.name}}</td> </tr> </ng-container> </table>
<table> <tr><td>101</td><td>Mahesh</td></tr> <tr><td>102</td><td>Krishna</td></tr> </table>
<ng-container>
then extra <div> will be added to DOM. Let’s use <div> with ngFor
.
<table> <div *ngFor="let user of users"> <tr *ngIf="user.isActive"> <td>{{user.id}}</td> <td>{{user.name}}</td> </tr> </div> </table>
<table> <div> <tr><td>101</td><td>Mahesh</td></tr> </div> <div> <tr><td>102</td><td>Krishna</td></tr> </div> </table>
<ng-container>
as host element for ngFor
is useful in such scenarios.
Ex-2: Find another example to use
<ng-container>
within <ul> element;
<ul> <ng-container *ngFor="let user of users"> <li *ngIf="user.isActive"> {{user.name}} </li> </ng-container> </ul>
<ul> <li> Mahesh </li> <li> Krishna </li> </ul>
<ng-container>
.
<ul> <div *ngFor="let user of users"> <li *ngIf="user.isActive"> {{user.name}} </li> </div> </ul>
<ul> <div> <li> Mahesh </li> </div> <div> <li> Krishna </li> </div> </ul>
ngFor
in such scenarios are adding unnecessary <div> elements. So the <ng-container>
element helps us a lot in such cases.
3. <ng-container> with ngSwitch
The<ng-container>
can be used with ngSwitch
to avoid extra HTML element which works as host element for ngSwitch
and ngSwitchCase
. The <ng-container>
can be used with ngSwitch
in following ways.
1.
<ng-container>
as host element for ngSwitchCase
.
<div [ngSwitch]="userId"> <ng-container *ngSwitchCase="101"> Mahesh </ng-container> <ng-container *ngSwitchCase="102"> Krishna </ng-container> </div>
<div> Mahesh </div>
<ng-container>
as host element for ngSwitch
and ngSwitchCase
both.
<ng-container [ngSwitch]="userId"> <ng-container *ngSwitchCase="101"> Mahesh </ng-container> <ng-container *ngSwitchCase="102"> Krishna </ng-container> </ng-container>
Mahesh
<ng-container>
as host element for ngSwitch
.
<ng-container [ngSwitch]="userId"> <div *ngSwitchCase="101"> Mahesh </div> <div *ngSwitchCase="102"> Krishna </div> </ng-container>
<div> Mahesh </div>
Without using
<ng-container>
Suppose we don’t use
<ng-container>
in above cases. The code will be as following.
<div [ngSwitch]="userId"> <div *ngSwitchCase="101"> Mahesh </div> <div *ngSwitchCase="102"> Krishna </div> </div>
<div> <div> Mahesh </div> </div>
ngSwitch
is being added in DOM. Sometimes this extra HTML is not needed and hence in that case <ng-container>
will be useful.
4. <ng-container> with <ng-template>
To use<ng-container>
with <ng-template>
we need to understand NgTemplateOutlet
directive.
NgTemplateOutlet
The
NgTemplateOutlet
can attach a context object to EmbeddedViewRef
. Suppose we have a following context object.
bookContext = { name: 'Ramayan', writer: 'Valmiki' };
<ng-template>
with a template reference variable as book.
<ng-template #book let-name="name" let-writer="writer">
<ng-container>
using ngTemplateOutlet
.
<ng-container *ngTemplateOutlet="book; context: bookContext"></ng-container>
<ng-template>
using let as let-name="name"
. To understand it more, find the code snippet.
<ng-template #hello> <span>Hello World!</span> </ng-template> <ng-template #book let-name="name" let-writer="writer"> <span> The book {{name}} is soul of India. It is written by Maharshi {{writer}} ji. </span> </ng-template> <ng-container *ngTemplateOutlet="hello"></ng-container> <br/><br/> <ng-container *ngTemplateOutlet="book; context: bookContext"></ng-container>
5. References
Angular <ng-container>Angular NgTemplateOutlet