Skip to content
Related Articles

Related Articles

Angular10 NgSwitchCase Directive

Improve Article
Save Article
  • Last Updated : 29 Jul, 2021
Improve Article
Save Article

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>

Output:

Reference: https://angular.io/api/common/NgSwitchCase


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!