Angular ngswitch case example

 

What is ngSwitch?

NgSwitch behaves like a case statement of javascript. If you are familiar with javascript easily can understand this concept. It belongs to two support directive ngSwitchCase,ngSwitchDefault.Remember that ngSwitch is not a structural directive. *ngSwitchCase,*ngSwitchDefault both are structural directive using these directives we can add or remove the element.

What does ngSwitch,ngSwitchCase,ngSwitchDefault?

ngSwitch is getting the value and processing support directive step by step. If any statement returns true, breaking the scope from there itself otherwise switching the next statement. If anything not matching finally executes the ngSwitchDefault statement.

How to use ngSwitch?

Employee Array

employee = [
    {
      empid: 5623,fullname: "Stephen",city: "Newyork",experience: "5 years"  
    },
    { empid: 6523,fullname: "Michel",city: "london",experience: "7 years"
    },
    { empid: 6523,fullname: "peeter",city: "Dubai",experience: "8 years"
    },
    { empid: 7458,fullname: "stella",city: "Paris",experience: "4 years"
    }
  ];

Html

<ul *ngFor="let data of employee" [ngSwitch]="data.city">
        <li *ngSwitchCase="'Newyork'">{{data.city}}</li>
        <li *ngSwitchCase="'london'">{{data.city}}</li>
        <li *ngSwitchCase="'Dubai'">{{data.city}}</li>
        <li *ngSwitchCase="'Tokyo'">{{data.city}}</li>
        <li *ngSwitchCase="'Delhi'">{{data.city}}</li>
        <li *ngSwitchDefault>{{data.city}}</li>
</ul>

• [ngSwitch]="data.city" - ngSwitch statement defined in the parent node of UL. It means city-data passing the switch case statement.
• *ngSwitchCase="'Newyork'" - This statement should present in the child node. If it is true, breaking the scope here otherwise switching to next statement.
• *ngSwitchDefault - This statement also should present in the child node..If any statement not true finally ngSwitchDefault executed.
• Remember *ngSwichDefault statement should be present in the last child node.

Find below the result

• Newyork

• london

• Dubai

• Paris

Have you seen the above result Tokyo,Delhi cities not present in the list because of both cities are not in the employee array data.

How to use the Switch case in angular Typescript?

ngswitch.component.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-ngswitch',
  templateUrl: './ngswitch.component.html',
  styleUrls: ['./ngswitch.component.css']
})
export class NgswitchComponent implements OnInit {
  employee: any;
  constructor() { }
 
  ngOnInit() {
    this.employee = [
      {
        empid: 5623, fullname: "Stephen", city: "Newyork", experience: "5 years"
      },
      {
        empid: 6523, fullname: "Michel", city: "london", experience: "7 years"
      },
      {
        empid: 6523, fullname: "peeter", city: "Dubai", experience: "8 years"
      },
      {
        empid: 7458, fullname: "stella", city: "Paris", experience: "4 years"
      }
    ];
 
    for (var i = 0; i < this.employee.length; i++) {
      switch (this.employee[i].city) {
        case "Newyork": {
          console.log(this.employee[i].city);
          break;
        }
        case "london": {
          console.log(this.employee[i].city);
          break;
        }
        case "NewJersy": {
          console.log(this.employee[i].city);
          break;
        }
        case "Tokyo": {
          console.log(this.employee[i].city);
          break;
        }
        default: {
          console.log("City not in the list");
          break;
        }
      }
    }
  }
 
}
 

Find below the console log 

Newyork
london
(2) City not in the list