Angular 11 NgSwitch Directive Examples: How to Use NgSwitch, NgSwitchcase, NgSwitchDefault in Angular

In this Angular 11 NgSwitch Directive tutorial, you will discover the easy and profound methods to use NgSwitch directive in Angular properly. Additionally, you will ascertain the usage of ngSwitchcase, & ngSwitchDefault directives combined with ngSwitch.

Sometimes you have multiple choices, and you want to invoke a specific action based on the selective condition. And if you are from the JavaScript background, then you must be aware of the switch statement.

It is employed for this type of scenario; the switch statement’s primary usage is to evoke a block of code depending on various cases. JavaScript developers are very much familiar with the switch statement it is more of conditional statements, likewise ngSwitch works on the same pattern.

The ngSwitch directive on a container defines an expression to match against. The expressions to match are granted by ngSwitchCase directives on views inside the container. The ngSwitchCase renders the default value when there are no particular match is found.

Angular NgSwitch Directive Example

The ngSwitch contains every possible value; the ngSwitchCase returns the matched value among all the possible values. For instance, we have a list of movies, and the favorite movie name is being displayed using the ngSwitch and ngSwitchCase directives in angular.

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

@Component({
  selector: 'app-root',
  template: `
    <ul [ngSwitch]="favMovie">
      <li *ngSwitchCase="'Shadow In The Cloud'">Shadow In The Cloud</li>
      <li *ngSwitchCase="'Monster Hunter'">Monster Hunter</li>
      <li *ngSwitchCase="'Vanguard'">Vanguard</li>
      <li *ngSwitchCase="'Wonder Woman 1984'">Wonder Woman 1984</li>
      <li *ngSwitchCase="'The Immortal Wars: Resurgence'">The Immortal Wars: Resurgence</li>
    </ul>
  `
})

export class AppComponent {

  favMovie = 'Shadow In The Cloud';

  constructor() { }

  ngOnInit(): void { }

}

Angular ngSwitchDefault with ngSwitch Example

The ngSwitchDefault directive is declared within the ngSwitch container, and it displays the default value, especially when there is no matched value found. In the below example, you can see the angular ngSwitchDefault example.

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

@Component({
  selector: 'app-root',
  template: `
    Switch Mongh : <input type='text' [(ngModel)]="month" />
  
    <div [ngSwitch]="month">
      <div *ngSwitchCase="'January'">January</div>
      <div *ngSwitchCase="'February'">February</div>
      <div *ngSwitchCase="'March'">March</div>
      <div *ngSwitchCase="'April'">April</div>
      <div *ngSwitchCase="'May'">May</div>
      <div *ngSwitchDefault>Default</div>
    </div>
  `
})

export class AppComponent {

  month: string;

  constructor() { }

  ngOnInit(): void { }

}

Angular NgSwitch and NgFor Example

Similarly, you can use ngFor directive and switch the expression using ngSwitch directive and render the multiple values.

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let fruit of Fruits" [ngSwitch]="fruit.color">
      <div *ngSwitchCase="'green'" class="green">
        {{ fruit.name }} ({{ fruit.color }})
      </div>
      <div *ngSwitchCase="'black'" class="black">
        {{ fruit.name }} ({{ fruit.color }})
      </div>
      <div *ngSwitchCase="'orange'" class="orange">
        {{ fruit.name }} ({{ fruit.color }})
      </div>
      <div *ngSwitchCase="'brown'" class="brown">
        {{ fruit.name }} ({{ fruit.color }})
      </div>
    </div>`
})

export class AppComponent {

  Fruits: any[] = [
    {
      "name": "Guava",
      "color": 'green'
    },
    {
      "name": "Grape",
      "color": 'black'
    },
    {
      "name": "Orange",
      "color": 'orange'
    },
    {
      "name": "Kiwi",
      "color": 'brown'
    }
  ];
  
}

Declare the CSS code in styles.scss file and view the ngSwitch and ngFor directives in action.

.green {
  color: green
}

.black {
  color: black
}

.orange {
  color: orange
}

.brown {
  color: brown
}

Directive References