Angular <ng-container>

By Arvind Rai, 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.

1. Technologies Used
2. <ng-container> with ngIf
3. <ng-container> with ngFor
4. <ng-container> with ngSwitch
5. <ng-container> with <ng-template>
6. Complete Example
7. Run Application
8. References
9. Download Source Code

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>

Find the code in DOM.

<div> Hello World! </div>

We can see that <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>

In this case the host element of 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>

And suppose we have a style.

p span { color: red; font-size: 10; }

The code in DOM will be added as following.

<p> My name is Narendra. 
   <span> My message: World should unite. </span>
   We should take care of each other.
</p>

Find the print screen of the UI.

We can see that unwanted <span> is creating problem in the above example because style is applied on it.
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>

Find the code which will be added in DOM.

<p> My name is Narendra.  
    My message: World should unite. 
    We should take care of each other.
</p>

Find the print screen of the UI.

We can see that no unwanted HTML element is added in DOM and we got expected output.

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>

Following code will be added in DOM.

<table>
  <tr><td>101</td><td>Mahesh</td></tr>
  <tr><td>102</td><td>Krishna</td></tr>
</table>

Now if we use <div> element in place of <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>

Find the code in DOM.

<table>
 <div>
   <tr><td>101</td><td>Mahesh</td></tr>
 </div>
 <div>
   <tr><td>102</td><td>Krishna</td></tr>
 </div>
</table>

We can see that using <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>

Find the code in DOM.

<ul>
 <li> Mahesh </li>
 <li> Krishna </li>
</ul>

Now find the code with <div> in place of <ng-container>.

<ul>
  <div *ngFor="let user of users">
    <li *ngIf="user.isActive">
        {{user.name}}
    </li>
  </div>
</ul>

Following code will be added in DOM.

<ul>
 <div>
   <li> Mahesh </li>
 </div>
 <div>
   <li> Krishna </li>
 </div>
</ul>

Using <div> as host element with 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>

Find code in DOM.

<div> 
  Mahesh 
</div>

2. <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>

Find code in DOM.

Mahesh

3. <ng-container> as host element for ngSwitch.

<ng-container [ngSwitch]="userId">
   <div *ngSwitchCase="101"> Mahesh </div>
   <div *ngSwitchCase="102"> Krishna </div>
</ng-container>

Find code in DOM.

<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>

Find the code in DOM.

<div>
  <div> Mahesh </div>
</div>

We can see that host HTML element for 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' };

Suppose we have <ng-template> with a template reference variable as book.

<ng-template #book let-name="name" let-writer="writer">

Now refer the template reference variable book and bookContext to <ng-container> using ngTemplateOutlet.

<ng-container *ngTemplateOutlet="book; context: bookContext"></ng-container>

The properties of bookContext can be assigned to <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>

Find the print screen of UI.

6. Complete Example

app.component.ts

import { 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' };
}

app.module.ts

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