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

  selector: 'app-ng-container',
  templateUrl: './ng-container.component.html',
  styleUrls: ['./ng-container.component.css']
export class NgContainerComponent implements OnInit {
  constructor() {

  ngOnInit(): void {


And html file

<div class="center">
    <ng-container *ngIf='showDiv'>
            <p>This is a toggleLeftSideMenu</p>
    <div class='btn'>
        <button (click)="toggle()">Toggle</button>

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