Hello Devs, 

In this tutorial, we will learn Angular 9/8/7 NgSwitch Directive Example

ngSwitch directive provide you to write simple switch case of javascript. you can see below simple example that will help you more:

Follow this step by step guide below. 


src/app/app.component.ts

import { Component } from '@angular/core';

  

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  

  mySwitchVar = "one";

  

}



src/app/app.component.html

<h1>Angular NgSwitch Directive Example - ItSolutionstuff.com</h1>

  

<div [ngSwitch]="mySwitchVar">

  

    <div *ngSwitchCase="'one'">

      <p>Switch Case One</p>

    </div>

  

    <div *ngSwitchCase="'two'">

      <p>Switch Case Two</p>

    </div>

  

    <div *ngSwitchCase="'three'">

      <p>Switch Case Three</p>

    </div>

  

    <div *ngSwitchDefault>

      <p>Switch Case Default</p>

    </div>

    

</div>



May this example help you.