Angular <ng-container>
March 18, 2020
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. Technologies Used
Find the technologies being used in our example.1. Angular 9.0.2
2. Node.js 12.5.0
3. NPM 6.9.0
2. <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>

3. <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.
4. <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.
5. <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>

6. Complete Example
app.component.tsimport { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h3>ng-container with ngIf</h3> <p> My name is Narendra. <ng-container *ngIf="isMsgShow"> My message: {{msg}} </ng-container> We should take care of each other. </p> <h3>ng-container with ngFor</h3> <ul> <ng-container *ngFor="let user of users"> <li *ngIf="user.isActive"> {{user.name}} </li> </ng-container> </ul> <h3>ng-container with ngSwitch</h3> <div [ngSwitch]="userId"> <ng-container *ngSwitchCase="101"> Mahesh </ng-container> <ng-container *ngSwitchCase="102"> Krishna </ng-container> </div> <h3>ng-container with ng-template</h3> <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> ` }) export class AppComponent { msg = 'World should unite.'; isMsgShow = true; isUserActive = true; userId = 101; users = [ { id: 101, name: 'Mahesh', isActive: true }, { id: 102, name: 'Krishna', isActive: true }, ]; bookContext = { name: 'Ramayan', writer: 'Valmiki' }; }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], providers: [ ], bootstrap: [ AppComponent ] }) export class AppModule { }
7. Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
8. References
Angular <ng-container>Angular NgTemplateOutlet