AngularJS ng-switch Directive

The ng-switch Directive in AngularJS is used to specify the condition to show/hide the child elements in HTML DOM. The HTML element will be displayed only if the expression inside the ng-switch directive returns true otherwise it will be hidden. It is supported by all HTML elements. 

Syntax:

<element ng-switch="expression">
 <element ng-switch-when="value"> Contents... </element>
 <element ng-switch-when="value"> Contents... </element>
 <element ng-switch-default> Contents... </element>
</element>

Parameter:

• expression: It specifies the element has matched and will be displayed otherwise will be discarded.

Example 1: This example uses the ng-switch Directive to switch the element. 

Output:

Example 2: This example uses the ng-switch Directive to display the entered number. 

Output: