ngSwitch, ngSwitchcase, ngSwitchDefault Angular Example

The ngSwitch is an Angular structural directive, which allows us to add or remove DOM elements. It works in conjunction with ngSwitchcase, & ngSwitchDefault directives. It is similar to the switch statement of JavaScript. In this tutorial, we will look at the syntax of ngSwitch, ngSwitchcase & ngSwitchDefault. We will show you how to use these directives using an example. The examples include ngSwitch Example, multiple ngSwitchCase , Loose Equality Checks, etc.

You can download the source code from GitHub

Angular ngSwitch Directive

The ngSwitch is an Angular directive, which allows us to display one or more DOM elements based on some pre-defined condition.

The following is the syntax of ngSwitch. It contains three separate directives. ngSwitch, ngSwitchCase & ngSwitchDefault.

Syntax

ngSwitch

ngSwitch is bound to container_element like div etc. We assign a switch-expression to the ngSwitch via property binding syntax. Angular evaluates the switch_expression at runtime and based on its value displays or removes the elements from the DOM.

ngSwitchCase

ngSwitchCase is bound to an inner_element, which we must place inside the container_element. We use * (Asterix symbol), because it is a structural directive. We also assign a match_expression, which Angular evaluates at runtime. The Angular displays the inner_element only when the value of the match_expression matches the value of the switch_expression else it is removed from the DOM.

If there is more than one match, then it displays all of them.

Note that the ngSwitchCase does not hide the element, but removes them from the DOM.

ngSwitchDefault

ngSwitchDefault is also bound to an inner_element, which we must place inside the container_element. But it does not have any match_expression. If none of the ngSwitchCase match_expression matches the switch_expression, then the angular displays the element attached to the ngSwitchDefault

You can place ngSwitchDefault anywhere inside the container element and not necessarily at the bottom.

You are free to add more than one ngSwitchDefault directive. Angular displays all of them.

Important Points

• You must place ngSwitchCase & ngSwitchDefault inside the ngSwitch directive
• Angular displays every element, that matches the switch_expression
• If there are no matches, angular displays all the elements, which has ngSwitchDefault directive
• You can place one or more than one ngSwitchDefault anywhere inside the container element and not necessarily at the bottom.
• Any element within the ngSwitch statement but outside of any NgSwitchCase or ngSwitchDefault directive is displayed as it is.
• The elements are not hidden but removed from the DOM.
• Angular uses loose equality checks to compare the ngSwitchCase expression with the ngSwitch expression. This means that the empty string "" matches 0.
• You can share the template between multiple ngSwitchCase using the ngTemplateOutlet

ngSwitch Example

Create a new Angular project. Add the bootstrap CSS to the project by adding the following in the index.html

Component Class

Create a variable num in your Angular Component class

Template

Now let us examine the code in detail

We bind the num variable to the input box.

We attach the ngSwitch directive to the div element, then bind it to the expression num.

Next, we have a few ngSwitchCase directives attached to the div element with matching expressions “1”,”2” etc. Whenever the num matches these expressions, the ngSwitchCase displays the element attached to it else it removes it from DOM.

The ngSwithcDefault does not take any expression, but it is displays only when all other ngSwitchCase match expressions fail.

More Examples

The following uses the array of objects instead of a variable.

Component class

Template

Note that we have two matches for *ngSwitchCase="'Two'". ngSwitchcase renders both.

You can also make use of ng-template directly instead of *ngSwitchCase. In fact *ngSwitchCase="'One'" is a shortcut to ng-template [ngSwitchCase]="'One'".

More than one ngSwitchDefault. Works perfectly ok.

Loose Equality Checks

Angular uses loose equality checks to compare the ngSwitchCase expression with the ngSwitch expression. This means that the empty string "" matches 0.

Multiple / Sharing ngSwitchCase

You may also want to share the template between two values. For Example One Template for the values One & Two & another template for values Three & Four. One option is to repeat the template under each switch case. Or you can also make use of the ngTemplateOutlet to share the template as shown below.

Source Code

You can download the source code from GitHub

References

1. ngSwitch
2. ngSwitchCase
3. ngSwitchDefault