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. 


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



  selector: 'my-app',

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

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


export class AppComponent  {


  mySwitchVar = "one";




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


<div [ngSwitch]="mySwitchVar">


    <div *ngSwitchCase="'one'">

      <p>Switch Case One</p>



    <div *ngSwitchCase="'two'">

      <p>Switch Case Two</p>



    <div *ngSwitchCase="'three'">

      <p>Switch Case Three</p>



    <div *ngSwitchDefault>

      <p>Switch Case Default</p>




May this example help you.