Angular ngSwitch Directive

Back to: Angular Tutorials For Beginners and Professionals

Angular ngSwitch Directive in Detail

In this article, I am going to discuss Angular ngSwitch Directive in detail. Please read our previous article where we discussed Angular ngIf directive with then and else block with examples. At the end of this article, you will understand what exactly ngSwitch Directive is and when and how to use this ngSwitch directive in Angular Application?

What is the Angular ngSwitch directive?

The Angular ngSwitch directive is actually a combination of two directives i.e. an attribute directive and a structural directive. It is very similar to the switch statement of other programming languages like Java and C# but within a template.

The ngSwitch directive lets you hide or show the HTML elements based on an expression. Here, you can also define a default section using the ng-switch-default directive to show a section if no other sections get a match. So, while working with ngSwitch directive, you need three things to keep in mind, they are ngSwitch, ngSwitchCase and ngSwithDefault.

Example to understand Angular ngSwitch Directive:

Let us understand the Angular ngSwitch Directive with an example. What we are going to do is, we will provide a dropdown list to the user to select the country code and based on the selected country code we will provide the full country name. Whenever no country code is selected then it will display you have not selected any country. For example, when you have not selected the country code, then by default the select option is selected from the drop dropdown list and You have not selected any country is displayed as sown in the below image.

But when selected a particular country code let say IN, then India should display as shown in the below image.

Let us see how to implement the above using Angular ngSwitch directive step by step.

Step1: Modify the app.component.ts file

First, modify the app.component.ts file as shown below. As you can see here, we have created one property i.e. dropDownValue and one method i.e. SetDropDownValue. And we are setting the property value using the methods parameter value. This method is going to be called by the dropdown list change event.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })

  export class AppComponent {
    public dropDownValue = "";
      SetDropDownValue(drpValue : any) {
        this.dropDownValue = drpValue.target.value;
    }
  }

Step2: Modify the app.component.html file

This is the important part and here you need to understand two things. First, we need to create the drop-down list and then on the change event of the dropdown list, we need to call the SetDropDownValue method that we created within our component class. For better understanding please have a look at the following image.

In the second step, we need to use the ngSwitch directive and in the ngSwitch directive, we need to bind the property (dropDownValue) and whose value is set by the drop-down list change event. Then we need to write the required ngSwitchCase statements. As we have three options in the drop-down list and so we have one ngSwitchCase one per each option value. Finally, we have the default switch case i.e. ngSwitchDefault which will execute when no options are selected from the dropdown list. For better understanding please have a look at the following image.

So, modify the app.component.html file as shown below and check in the browser and it should work as expected.

<h2>Select Country</h2>

<select (change)="SetDropDownValue($event)">
  <option value="">Select</option>
  <option value="In">In</option>
  <option value="US">US</option>
  <option value="UK">UK</option>
</select>

<h2>You Have Selected</h2>

<div [ngSwitch] = 'dropDownValue'>
  <h3 *ngSwitchCase="'In'">India</h3>
  <h3 *ngSwitchCase="'US'">United State</h3>
  <h3 *ngSwitchCase="'UK'">United Kingdom</h3>
  <h3 *ngSwitchDefault="">You have not selected any country</h3>
</div>

In the next article, I am going to discuss Angular ngStyle Directive with some examples. Here, in this article, I try to explain the Angular ngSwitch directive with an example and I hope you enjoy this article and understood the concept of ngSwitch directive in angular application.