Angular ng-container Example

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

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> 
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.
Angular ng-container
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.
Angular ng-container
We can see that no unwanted HTML element is added in DOM and we got expected output.

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

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

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' }; 
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.
Angular ng-container

5. Output

Find the print-screen of the output.

6. References

Angular <ng-container>
Angular NgTemplateOutlet

7. Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us