Angular 8|9 NgSwitch Directive Tutorial with Examples

By Digamber Rawat Last updated on
In this Angular 8|9 tutorial, we’ll learn to work with NgSwitch directive. We’ll understand the ngSwitch structural directive with real-world examples. NgSwitch is a built-in Angular 9 template directive, and it works the same way as the JavaScript’s switch statement does. This directive helps in showing or hiding the templates based on the conditional statement.

To make the NgSwitch work declare the NgSwitch structural directive on the main HTML element. Inside the NgSwitch container define the *ngSwitchCase statement, the *ngSwitchCase statement refers to one of the possibility from the multiple possibilities tree. If one statement doesn’t match with the expression, it goes to another ngSwitchCase statement, and if it doesn’t match with the expression, then it shows the result from the element where a *ngSwitchDefault statement is defined.

Understand NgSwitch, NgSwitchCase and ngSwitchDefault Directives

Angular offers various built-in directives, NgSwitch is one of the main directive which allows to place multiple statements in the Document Object Model (DOM) and shows the result if the condition is met with certain expression.The NgSwitch directive requires *ngSwitchCase and *ngSwitchDefault directive to get the result from the multiple possibilities.

Directives Description
ngSwitch It’s a structural directive, all the possible values defined inside of it. It gets the switch value based on the matched statement among multiple possibilities.
ngSwitchCase The ngSwitchCase statement is declared inside the ngSwitch directive with the specific value.
ngSwitchDefault This statement executes when the expression doesn’t match with any of the defined value.

Using NgSwitch Directive in Angular 8|9

In the below example, we will try to understand the NgSwitch expression in a simple manner. In order to set the ngSwitch directive in Angular HTML template. Add the [ngSwitch] directive along with the desired value on the main container:

<ul [ngSwitch]="superhero">

</ul>

Now, ngSwitch has been added to the main container along with `superhero` value. Then, add the *ngSwitchCase directive inside the NgSwitch statement and the same way you can place as many as ngSwitchCase inside the NgSwitch statement.

<li *ngSwitchCase="'Groot'">Groot</li>

Lastly, we need to declare the *ngSwitchDefault directive. The ngSwitchDefault directive will show the default result if the ngSwitchCase statement unable to fetch the result.

<li *ngSwitchDefault>Batman</li>

Angular 8|9 NgSwitch Directive Example

You can see below how we used NgSwitch directive with HTML elements to show the matching result from the multiple choices:

<ul [ngSwitch]="superhero">
  <li *ngSwitchCase="'Groot'">Groot</li>
  <li *ngSwitchCase="'Ironman'">Ironman</li>
  <li *ngSwitchCase="'Hulk'">Hulk</li>
  <li *ngSwitchCase="'Thor'">Thor</li>
  <li *ngSwitchCase="'Spiderman'">Spiderman</li>
  <li *ngSwitchDefault>Batman</li>
</ul>

Define ngSwitch expression value in app.component.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  superhero = 'Spiderman';
}

The [ngSwitch] directive will return `Spiderman` as a result from the multiple possibilities because we defined `Spiderman` as the superhero’s value.

Using NgFor with NgSwitch in Angular 9

In this example, we will understand how to use *ngFor directive with *ngSwitch directive. We mainly use *ngFor directive to iterate over a data collection. In the below example we will create a Cars array and show the cars data on front-end using Angular 8|9 *ngFor and *ngSwitch directive. This way, we will assign dynamic color classes to the HTML elements.

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

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let car of Cars" [ngSwitch]="car.color">
      <div *ngSwitchCase="'blue'"
          class="blue">
        {{ car.name }} ({{ car.color }})
      </div>
      <div *ngSwitchCase="'yellow'"
          class="yellow">
        {{ car.name }} ({{ car.color }})
      </div>
      <div *ngSwitchCase="'silver'"
          class="silver">
        {{ car.name }} ({{ car.color }})
      </div>
      <div *ngSwitchCase="'red'"
          class="red">
        {{ car.name }} ({{ car.color }})
      </div>
      <div *ngSwitchDefault
          class="text-warning">
        {{ car.name }} ({{ car.color }})
      </div>
    </div>`
})

export class AppComponent {
  Cars: any[] = [
    {
      "name": "BMW",
      "average": 12,
      "color": 'blue'
    },
    {
      "name": "Ford",
      "age": 15,
      "color": 'yellow'
    },
    {
      "name": "Suzuki",
      "age": 18,
      "color": 'silver'
    },
    {
      "name": "MG Hector",
      "age": 14,
      "color": 'red'
    },
    {
      "name": "Jaguar",
      "age": 8,
      "color": 'green'
    }
  ];
}

Add some styling in styles.css:

.blue {
  color: blue
}

.yellow {
  color: yellow
}

.silver {
  color: silver
}

.red {
  color: red
}

.blue {
  color: blue
}

Now, above Angular NgSwitch expression will apply various color classes to the HTML element using NgFor directive:

Angular 8|9 NgSwitch Directive

Conclusion

Finally, we’ve completed Angular 8|9 NgSwitch directive tutorial with examples. In this Angular tutorial we tried to cover up workflow of NgSwitch directive. Roles of NgSwitchCase and ngSwitchDefault directives in NgSwitch statement. And how to use *ngFor with NgSwitch directive. There are many conditions where we required to use NgSwitch directive. I hope this tutorial will help you to clear the basic concepts of Angular directives.

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.