Spread the love

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:

ng-container example

As we can see ng-container tag is not visible and dom is only showing comment.

Leave a Reply