The ngSwitch directive in AngularJS conditionally swaps the DOM structure on the template based upon the scope expression. This directive can be used for showing or hiding elements based upon the switch cases.

The HTML elements will be displayed only if the expression inside the ngSwitch directive evaluates to True, else it will remain hidden. This directive is supported by all the HTML elements.

Syntax

    Contents... 
    Contents... 
    Contents... 

Example − ngSwitch Directive

Create a file "ngSwitch.html" in your Angular project directory and copy-paste the following code snippet.

   
      

      
   

   
      

         Welcome to Tutorials Point
      
      

         AngularJS | ngSwitch Directive
      

      

         

            
               
               FrontEnd Frameworks
            
            
               
               Backend Technologies
            
         

         

            

               
FrontEnd Frameworks
               

                  
Angular JS
                  
React JS
                  
Vue JS
               
            
            

               
Backend Technologies
               

                  
C
                  
C++
                  
Java
               

Output

To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.

Example 2

Create a file "ngSwitch.html" in your Angular project directory and copy-paste the following code snippet.

   
      

      
   

   

   

      Welcome to Tutorials Point
   
      

         AngularJS | ngSwitch Directive
   

   

      

         Type value(true/false):
         
      



      

         

            You entered {{value}}
         

         

            You entered {{value}}
         

         

            This is the default section.
         
      
   

Output

To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.