Angular 14 NgSwitch Directive Tutorial with Examples

NgSwitch is a built-in Angular 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.

In order to remove strict type warnings or errors make sure to set “strict”: false and "strictTemplates": false under compilerOptions and angularCompilerOptions properties in tsconfig.json file.

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).

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.

Using NgSwitch Directive in Angular

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 14 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

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 *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:

Conclusion

Finally, we’ve completed Angular 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.