Angular10 NgSwitchCase Directive

Last Updated : 06 Jan, 2023

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

The NgSwitchCase in Angular10 is used to create a view that will be added or removed from the parent NgSwitch when the given expression matches the expression

Syntax:

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

NgModule: Module used by NgSwitchCase is:

CommonModule

Selectors:

[NgSwitchCase]

Approach:

Create the angular app to be used
There is no need for any import for the NgSwitchCase 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 1:

app.component.ts

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

app.component.html

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