Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
ng-container with example

What is ng-container in angular 12 ?

Aman Jain, October 24, 2021November 5, 2023

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:

Screenshot 2021 10 24 at 4.00.21 PM
ng-container example

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

Related

Angular Javascript

Post navigation

Previous post
Next post

Related Posts

Javascript How to check user agent in angular

How to check user agent in angular ?

October 18, 2022March 16, 2024

In this post, we will show you how to check user agent in Angular. user-agent header is a string that contains information about the browser and operating system. It is set by the browser and sent to the server with every request. It can also be used to determine if…

Read More
Javascript localStorage.setItem(key,value)

How to store data in local storage in angular ?

March 28, 2022

While working in angular application we want to store data in local storage for example want to store user login data or some calculations. In this article i will show you to store objects, array, integer, string etc. in local storage. We will going to use native API for storing…

Read More
Javascript Angular Focusout Event on Input Example

Angular Focusout Event on Input Example

September 24, 2022March 16, 2024

Angular Focusout Event on Input is an Angular event binding it triggers when user interacts with DOM like text based input element and focus get out from the element. Input events in angular can be handled using input and output decorators and in this tutorial we will learn Angular FocusOut…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
  • Understanding High Vulnerabilities in Software: A Week of Insights
  • Blocking Spam Requests with LaraGuard IP: A Comprehensive Guide
  • Enhancing API Development with Laravel API Kit
  • Exploring the Future of Web Development: Insights from Milana Cap
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version