Skip to content
Related Articles

Related Articles

Improve Article

Angular10 NgSwitchCase Directive

  • Last Updated : 29 Jul, 2021
Geek Week

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
Recommended Articles
Page :