In this article we will learn about the ng-container of angular. ng-container is a logical container where we can add condition and it will never show in dom tree. so, basically we can say that ng-container is useful where we want to apply some condition or change in logical layout without appending in dom tree.
Let’s take some quick example:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ng-container',
templateUrl: './ng-container.component.html',
styleUrls: ['./ng-container.component.css']
})
export class NgContainerComponent implements OnInit {
showDiv=true;
constructor() {
}
toggle(){
this.showDiv=!this.showDiv
}
ngOnInit(): void {
}
}
And html file
<div class="center">
<ng-container *ngIf='showDiv'>
<div>
<h1>Test</h1>
<p>This is a toggleLeftSideMenu</p>
</div>
</ng-container>
<div class='btn'>
<button (click)="toggle()">Toggle</button>
</div>
</div>Above example results:
As we can see ng-container tag is not visible and dom is only showing comment.