How to implement Angular ngSwitch Directive with Examples

Angular 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 have 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 hold variable that to compare 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 match condition 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 the expression of each ngSwitchCase, will render the corresponding paragraph in about when matched 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 Angular switch directive with output

Angular ngSwitch directive with example

Angular ngswitch

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

Angular ngSwitch example
<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 Angular component template, then ngswitch is the best approach. We had demonstrated a few examples of Angular switch cases. I hope you get some idea about how to use this directive.

Related posts

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top