Angular ng-container

The ng-container is an Angular element that acts as a grouping mechanism. It does not render any additional HTML in the DOM which makes it great for scenarios where you need to apply structure directives like *ngIf, *ngFor, or *ngSwitch but do not want to create additional elements like div or span that could disrupt your layout or styles. In this article, we explain about what is ng-container and examples with related outputs in different approaches for your reference.

Why use ng-container?

There are some reasons why you should use ng-container:

• Keeps your DOM clean: ng-container helps keep your HTML clean by not adding extra elements to the page.
• Combine Multiple Directives: ng-container allows you to use Angular directives together without adding extra elements to your HTML.
• Improve Performance: ng-container helps keep things efficient making your page run a little smoother.

Prerequisites

• HTML
• JavaScript
• Angular CLI

Approach

Using ng-container with *ngIf

This approach allows us to conditionally include or exclude a section of the DOM without introducing extra HTML elements.

Syntax

<ng-container *ngIf="isLoggedIn">
    <p>Welcome, user!</p>
</ng-container>

This is particularly useful when you want to include or exclude multiple elements based on a single condition without wrapping them in a parent element.

Using ng-container with *ngFor

This approach lets you iterate over a list of items and render them in the DOM without adding extra elements.

Syntax

<ng-container *ngFor="let user of users">
    <p>{{ user.name }}</p>
    <p>{{ user.email }}</p>
</ng-container>

This is ideal for scenarios where you need to render multiple elements for each item in a list but don't want to add extra wrapper around those elements.

Using ng-container with ngSwitch

This approach allows you to conditionally render different templates based ona switch expression.

Syntax

<ng-container [ngSwitch]="user.role">
    <p *ngSwitchCase="'admin'">Admin Dashboard</p>
    <p *ngSwitchCase="'user'">User Dashboard</p>
    <p *ngSwitchDefault>Unknown role</p>
</ng-container>

This is useful when you have multiple conditions and want to selectively render different parts of the template based on the evaluated expression without adding unnecessary parent elements.

Using ng-container with ngIf and ngFor Combination

This approach demonstrates how to combine ngIf and ngFor.

Syntax:

 <ul>
  <ng-container *ngFor="let user of users">
    <ng-container *ngIf="user.isActive">
      <li>{{ user.name }} - {{ user.email }}</li>
    </ng-container>
  </ng-container>
</ul>

Using ng-container with ngTemplateOutlet

This approach demonstrates how to use ng-container with ngTemplateOutlet to dynamically render template.

Syntax:

<ng-container *ngTemplateOutlet="tmpl; context: {$implicit: 'Hello'}"></ng-container>
<ng-template #tmpl let-text>
  <h1>{{ text }}</h1>
</ng-template>

Steps to Create an Application Using ng-container

Here we created a new angular application to develop ng-container in angular in different approaches for this follow step by step process.

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create a New Angular Application

ng new ngcontainerexample
cd ngcontainerexample

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^18.2.0",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/platform-server": "^18.2.0",
    "@angular/router": "^18.2.0",
    "@angular/ssr": "^18.2.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
}

Example:

Below is the example demonstrating the use of ng-container in angular applications.

App Component

App Component is having example of different approaches such as *ngIf , *ngFor, *ngSwitch, etc. which demonstrates how to render data on browser while syncing it from typescript file.

<!-- src/app/app.component.html -->
<!-- Using <ng-container> with *ngIf -->
<ng-container *ngIf="isLoggedIn">
    <p>Welcome, user!</p>
</ng-container>

<!-- Using <ng-container> with *ngFor -->
<ng-container *ngFor="let user of users">
    <p>Name: {{ user.name }}</p>
    <p>Email: {{ user.email }}</p>
</ng-container>

<!-- Using <ng-container> with ngSwitch -->
<ng-container [ngSwitch]="userRole">
    <p *ngSwitchCase="'admin'">Admin Dashboard</p>
    <p *ngSwitchCase="'user'">User Dashboard</p>
    <p *ngSwitchDefault>Unknown role</p>
</ng-container>

<!-- Using <ng-container> with *ngIf and *ngFor Combination -->
<ul>
    <ng-container *ngFor="let user of users">
        <ng-container *ngIf="user.name"> <!-- Adjust this based on your actual data properties -->
            <li>{{ user.name }} - {{ user.email }}</li>
        </ng-container>
    </ng-container>
</ul>

<!-- Using <ng-container> with ngTemplateOutlet -->
<ng-container *ngTemplateOutlet="tmpl; context: {$implicit: 'Hello'}"></ng-container>
<ng-template #tmpl let-text>
    <h1>{{ text }}</h1>
</ng-template>

// src/app/app.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    standalone: true,
    imports: [RouterOutlet, CommonModule],
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    isLoggedIn = true;
    userRole = 'admin';
    users = [
        { name: 'John Doe', email: '[email protected]', isActive: true },
        { name: 'Jane Smith', email: '[email protected]', isActive: false }
    ];
}

Once Development is completed now run the angular application by using below command

ng serve

Output