Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/angular-js/angular10-ngswitch-directive/ below:

Angular10 NgSwitch Directive - GeeksforGeeks

Last Updated : 23 Jul, 2025

In this article, we are going to see what is NgSwitch in Angular 10 and how to use it.

The NgSwitch in Angular10 is used to specify the condition to show or hide the child elements.

Syntax:

<li *NgSwitch='condition'></li>

NgModule: Module used by NgSwitch is:

• CommonModule

Selectors:

• [NgSwitch]

Directives:
• NgSwitchCase

Approach: 

• Create the angular app to be used
• There is no need for any import for the NgSwitch to be used
• define a variable in app.component.ts
• in app.component.html use NgSwitch with NgSwitchCase directive in the element with conditions to be checked
• Serve the angular app using ng serve to see the output

Example:

import { Component, Inject } 
from '@angular/core';
import { PLATFORM_ID } 
from '@angular/core';
import { isPlatformWorkerApp } 
from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  num = 2;
}

<div [ngSwitch]="num">
  <div *ngSwitchCase="'1'">One</div>
  <div *ngSwitchCase="'2'">Two</div>
  <div *ngSwitchCase="'3'">Three</div>
  <div *ngSwitchCase="'4'">Four</div>
  <div *ngSwitchCase="'5'">Five</div>
</div>

Output:

Reference: https://v17.angular.io/api/common/NgSwitch

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4