Video Tutorials

Policy

Twitter LogoFacebook Logo
ngSwitch Directive in Angular
[object Object]
By: King

We use ngSwitch directive to display or hide elements from the page. 

Unlike the ngIf directive, where results are binary with only true and false values, the ngSwitch directive can react to results with more than 2 variations.

There would be a bunch of elements with labels and a container element that determines which of the elements inside to display.

<div [ngSwitch]="expression">

   <div *ngSwitchCase="1"></div>
   <div *ngSwitchCase="2"></div>
   <div *ngSwitchCase="3"></div>
</div>

For the container element, there is the ngSwitch directive and an activation expression.

<div [ngSwitch]="expression">

   <div *ngSwitchCase="1"></div>
   <div *ngSwitchCase="2"></div>
   <div *ngSwitchCase="3"></div>
</div>

The ngSwitch directive will take the result of the activation expression and match it with the labels of the sub elements. If it finds a match, it will activate and display the view that matched the result.

Let’s see how it works in code. Open your Angular project on VS code. 

To begin, go to the app component HTML page and add a div element and then 3 more div elements inside.

<div>

   <div>View 1</div>
   <div>View 2</div>
   <div>View 3</div>
</div>

Label them 1, 2, and 3 by using the shorthand syntax of the ngSwitchCase directive. Then, apply the ngSwitch directive to the container element and use the compact syntax to begin inputting the activation expression. 

<div [ngSwitch]="">

   <div *ngSwitchCase="1"></div>
   <div *ngSwitchCase="2"></div>
   <div *ngSwitchCase="3"></div>
</div>

Go to the app component TypeScript file, declare a variable, and give it a value of 1.

expression = 1;

Go back to the app component HTML page and insert the variable into the ngSwitch directive.

<div [ngSwitch]="expression">

   <div *ngSwitchCase="1"></div>
   <div *ngSwitchCase="2"></div>
   <div *ngSwitchCase="3"></div>
</div>

So right now, it will display the view with the label 1 since the value of the activation expression is one.

Let’s verify that, save the project and start the local server. Then open the browser and go to localhost:4200.

Image from Codeible.com

As you can see, it is displaying view 1. If we change the value of the variable to 3, it will display the 3rd view since the label matches the value 3. 

expression = 3;

Image from Codeible.com

Default View

Moreover, sometimes the result of the activation expression may end up with a value that doesn’t match any of the labels, but we may still want to display something.

If we change the value of the variable to 0. It wouldn’t display anything since there are no matches.

Image from Codeible.com

To display something even if there are no matching labels, we need to add an additional view and give it a special label that lets the ngSwicth directive know to use the view when no matches are found.

<div [ngSwitch]="expression">

   <div *ngSwitchCase="1"></div>
   <div *ngSwitchCase="2"></div>
   <div *ngSwitchCase="3"></div>
   <div>Default View</div>
</div>

To tell the ngSwicth directive to use this element when it can’t find a match, we need to apply the ngSwitchDefault directive to it.

<div [ngSwitch]="expression">

   ...
   <div *ngSwicthDefault>Default View</div>
</div>

The element with the ngSwitchDefault directive will get activated when no other labels matches the result activation expression.

Since the value of our activation expression is 0, views 1, 2, or 3 will not be display, but instead it will use the view with the default label.

Image from Codeible.com

As you can see, it is displaying the default view.

Recap

Let’s take a moment to recap what we have learned.

1. We learned how to use the ngSwitch directive to display and hide elements from our page.

2. We learned how the ngSwitch directive uses the activation expression to select which view to display

3. We also learned how to display a default view when there are no labels that matches the result of the activation expression.


Sign In