The ng-class Directive in angularjs allows the user to dynamically set the CSS classes on an HTML element by databinding an expression which will further represent all those classes to be added. The class is only added if the expression inside the ngClass Directive returns True, else it will not be added. It is supported by all the HTML elements.

The directive does not set any duplicate class if it was already set. When the expression changes, the previously added classes will be removed and the new classes will be added only after that.

Syntax

..Content..

Example − ngClass Directive

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

   
      

      

      

   
   
   

      Welcome to Tutorials Point
   
   

      angularjs | ngClass Directive
   

      

         
         
         



         
            SIMPLY EASY LEARNING
         
      
   

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 "ngClass.html" in your Angular project directory and copy-paste the following code snippet.

   
      

      

      
   

   
      

         Welcome to Tutorials Point
      
      

         angularjs | ngClass Directive
      

      

         
            
               
               
                  
               
            
         
Select any frontend framework:

                     {{i.name}}
                  
      
      
      
   

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.