*ngSwitch directive

• The ngSwitch directive in Angular is a structural directive that facilitates the rendering of content based on a specified condition. 
• It's akin to a switch statement in traditional programming languages and is used to display different sections of content based on different values or cases

Syntax:

<div [ngSwitch]="expression">
  <div *ngSwitchCase="value1">Content for value1</div>
  <div *ngSwitchCase="value2">Content for value2</div>
  <div *ngSwitchDefault>Default content</div>
</div>

Example:

Step 1: Create an Angular project using Angular CLI.

ng new ng-switch-example

Step 2: Create a new component message

ng g c status

Step 3: Edit the 'status.component.html' to use '*ngSwitch' :

<div>
  <h2>Order Status</h2>
  <div [ngSwitch]="orderStatus">
    <p *ngSwitchCase="'value1'">Order Placed</p>
    <p *ngSwitchCase="'value2'">Order Dispatched</p>
    <p *ngSwitchCase="'value3'">Order Delivered</p>
    <p *ngSwitchDefault>Order Pending</p>
  </div>
</div>

Step 4: Edit the 'status.component.ts' to define the component's logic.

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


@Component({
  selector: 'app-status',
  templateUrl: './status.component.html',
  styleUrls: ['./status.component.css']
})
export class StatusComponent implements OnInit {

  orderStatus: string = 'value 1';
  constructor() { }

  ngOnInit() {
  }

}

Step 5: Add the ‘<app-status></app-status>’ to the ‘app.component.html’ to include the ‘status component’ in the main application.

<app-status></app-status>

Step 6: Now run or compile the application.

ng serve

You will see the result on http://localhost:4200