How to implement Angular ngSwitch Directive with Examples

Angular the ngSwitch directive, we can control the display of blocks of elements within DOM based on conditions. Angular has a lot of built-in directives: *ngIf , *ngFor , *ngSwitch. These directives are so-called structural directives, which are responsible for changing the layout of the HTML by adding, removing, or modifying elements from the DOM. Structural directives start with an asterisk ( * ).

Angular also has ngClass, and ngStyle directives to manipulate the appearance of the DOM elements they are called attribute directives and start with [] square bracket.

What is Angular ngSwitch directive or Angular switch directive

Sometimes we need to render different elements depending on a given condition. When you run into this situation, you could solve this by using several *ngIf directives but it is better to use the angular ngSwitch directive in such a situation.

The *ngSwitch directive allows us to select one among multiple cases if none of a case is met the condition or is executed then the default switch case is executed. Angular switch directive is similar to the switch statement in any other programming like C, Java, and others. The idea behind this directive is the same: allow a single evaluation of an expression, and then display nested elements based on the value that resulted from that evaluation.

Syntax of angular ngSwitch directive of Angular

The ngSwitch directive is used for adding or removing DOM elements when they match switch expressions.

<container-element [ngSwitch]="switch_expression">
   <element *ngSwitchCase="condition1">Case 1 content</element>
   <element *ngSwitchCase="condition2">Case 2 content </element>
   ....
   <element *ngSwitchDefault>Default content</element>
</container-element>

Angular *ngSwitch directive has the following sub-elements.

1. ngSwitch: is a structural directive holding all expression bodies and it holds a variable that compares with ngSwitchCase.
2. *ngSwitchCase: have an expression for each matching condition and will render the corresponding template if its condition matches that of the NgSwitch have.
3. *ngSwitchDefault: element is optional and it will render when any of the match conditions is failed.

An Angular ngSwitch example

To check how NgSwitch operates works, we have an example of an Angular switch, and let’s add a variable page to about in the typescript component. The ngSwitch expression will check the matching of the expression of each ngSwitchCase, and will render the corresponding paragraph in about when match is found.

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

 @Component({
   selector: 'my-app',
   template: 
     `<div [ngSwitch]="page">
        <p *ngSwitchCase="'info'">Information</p>
        <p *ngSwitchCase="'about'">About</p>
        <p *ngSwitchCase="'contact'">Contact page</p>
        <p *ngSwitchDefault>Home</p>
      </div>`,
 })
 export class AppComponent  { 
   page = 'about';
 }

We have another example of an Angular switch directive with output

Angular ngswitch

In the ngSwitch directive, for example, two we have a select input value, based on a value selected we will display its corresponding data.

<select [(ngModel)]="selectedFramework">
   <option *ngFor="let framework of frameworks">
     {{ framework.name }}
   </option>
</select>

<div [ngSwitch]="selectedFramework">
  <div *ngSwitchCase="'Angular'">
     Angular version 12
  </div>
  <div *ngSwitchCase="'Vue'">
    Vue 3
  </div>
  <div *ngSwitchCase="'Reactjs'">
     Reactjs 17
  </div>
  <div *ngSwitchDefault>
    Ionic
  </div>
</div>

frameworks = [
  { id: 1, name: 'Angular' },
  { id: 2, name: 'Reactjs' },
  { id: 3, name: 'Vue' },
  { id: 4, name: 'Ionic' }
];

selectedFramework= '';

An Angular official document on ngSwitch directive for more information.

Conclusion
We had completed our tutorial on Angular switch cases, when we have many conditions to operate in the Angular component template, then ngswitch is the best approach. We demonstrated a few examples of Angular switch cases. I hope you get some idea about how to use this directive.

Related posts

• How to implement Angular ngClass with and without conditions?
• Angular dynamically adds and removes CSS Classes using ngClass | custom directive.
• An angular directive in detail with an example
• Sharing data between Angular Component
• How to use to implement HighCharts Angular?