ng-container In Angular

The Code Points June 20, 2022 0

In this article, we will learn about the ng-container in Angular. This is used to generate a dummy part in the template that isn't rendered in HTML. When working with structural directives like ngIf, ngFor, and ngSwitch, this is a very handy feature. We also take a look at some of the applications.

What is ng-container?

Without introducing a new HTML element, ng-container allows us to define a division or segment in a template. Although the ng-container is not rendered in the DOM, the content inside it is. ng-container is a syntactic element, not a directive, component, class, or interface.

As an example,

The following is a sample template.

<h1> ng-Container</h2>
<p>Hello  world! </p>
<ng-container>               //This is removed from the final HTML
 Container's content.
</ng-container>

Renders as

<h1> ng-Container</h2>
<p>Hello  world! </p>
Container's content.

The element isn't there in the final HTML, as you can see.

Uses of ng-container

It's a really practical directive. Especially when using structural directives like as ngIf, ngFor, and so on.

ng-Container with ngFor

Consider the following objects as an example. We want to show the items as a list, but just the ones that are active. This necessitates two instructions. To loop through the items, use ngFor, and ngIf to see if they're active.

items= [
  { name:'Angular', active:true},
  { name:'React', active:true},
  { name:'Typescript', active:true},
  { name:'FoxPro', active:false},
  { name:'Javascript', active:true},
  { name:'ASP.NET Core', active:true},
  { name:'DBase', active:false}
]

The only way to achieve this without ng-container is to use the span element as illustrated. This adds a DOM element that isn't required. It's also possible that it'll mess up the CSS.

<ul>
 <span *ngFor="let item of items;">
   <li *ngIf="item.active">
     {{item.name}}
   </li>
 </span>
</ul>

Our HTML renders correctly without the extra span elements when we replace span with ng-container.

<ul>
 <ng-container *ngFor="let item of items;">
   <li *ngIf="item.active">
     {{item.name}}
   </li>
 </ng-container>
</ul>

ng-container examples

ng-container with ngIf

The div of the ngIf is not necessary here.

<div *ngIf="items1">          //Replace the div with ng-container as shown below
 <div *ngFor="let item of items1;">
   {{item.name}}
 </div>
</div>

<ng-container *ngIf="items1">
 <div *ngFor="let item of items1;">
   {{item.name}}
 </div>
</ng-container>

ngSwitch with/without ng-container

<div [ngSwitch]="value">
 <span *ngSwitchCase="0">Text one</span>
 <span *ngSwitchCase="1">Text two</span>
</div>

<div [ngSwitch]="value">
 <ng-container *ngSwitchCase="0">Text one</ng-container>
 <ng-container *ngSwitchCase="1">Text two</ng-container>
</div>

ngTemplateOutlet

The container is also used as a placeholder for the ngTemplateOutlet, which is used to inject a dynamic template.

<ng-container *ngTemplateOutlet="loading"></ng-container>

Conclusion

In this article, we learned what ng-container in Angular is and how to use it.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.