AngularJS ng-switch Directive Last Updated : 08 Aug, 2022 Comments Improve Suggest changes Like Article Like Report 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. HTML <!DOCTYPE html> <html> <head> <title>ng-switch Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </script> </head> <body ng-app=""> <h1 style="color:green;">GeeksforGeeks</h1> <h2>ng-switch Directive</h2> <div> <form> <label> <input type="radio" value="search" ng-model="switch.Data"> Searching Algorithms </label> <label> <input type="radio" value="sort" ng-model="switch.Data"> Sorting Algorithms </label> </form> <div ng-switch="switch.Data" id="wrapper"> <div ng-switch-when="search"> <h2> Searching Algorithms</h2> <ul> <li>Binary Search <li>Linear Search </ul> </div> <div ng-switch-when="sort"> <h2>Sorting Algorithms</h2> <ul> <li>Merge Sort <li>Quick Sort </ul> </div> </div> </div> </body> </html> Output: Example 2: This example uses the ng-switch Directive to display the entered number. HTML <!DOCTYPE html> <html> <head> <title>ng-switch Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </script> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app="" style="text-align:center;"> <h1 style="color:green;">GeeksforGeeks</h1> <h2>ng-switch Directive</h2> <div> <div class="col-md-3"> Type Number(1-2): <input ng-model="number" type="number" /> </div><br> <div ng-switch="number" class="col-md-3"> <div ng-switch-when="1" class="btn btn-danger"> You entered {{number}} </div> <div ng-switch-when="2" class="btn btn-primary"> You entered {{number}} </div> <div ng-switch-default class="well"> This is the default section. </div> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article AngularJS ng-switch Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads Angular10 NgSwitch Directive In this article, we are going to see what is NgSwitch in Angular 10 and how to use it. The NgSwitch in Angular10 is used to specify the condition to show or hide the child elements. Syntax: <li *NgSwitch='condition'></li> NgModule: Module used by NgSwitch is: CommonModule  Selectors: [N 1 min read AngularJS ng-src Directive The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produce 2 min read AngularJS ng-show Directive The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: <element ng-show="expression"> C 2 min read AngularJS ng-paste Directive The ng-paste Directive in AngularJS is used to specify custom behavior functions when the text in input fields is pasted into an HTML element. It can be used to call a function that will be triggered when the text is pasted into the input field. It is supported by <input>, <select> and 2 min read AngularJS ng-style Directive The ng-style Directive in AngularJS is used to apply custom CSS styles on an HTML element. The expression inside the ng-style directive must be an object. It is supported by all the HTML elements. Syntax: <element ng-style="expression"> Content ... </element>Parameter: expression: It rep 2 min read Like