AngularJS ngClass Conditional

Last Updated : 07 May, 2023

The ngClass is a directive in AngularJS that facilitates to implementation of the CSS classes on an HTML element dynamically, ie, by adding and removing CSS classes on that specific element. We can use the ngClass directive to provide certain conditions, to add different classes to the elements. In this article, we will see the multiple ways of applying conditional expressions using the ngClass in Angular JS.

Syntax:

<element ng-class=expression>
    Content...
</element>

Example 1: This example illustrates how to add two different CSS classes to the same element depending on the condition.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> 
    </script> 
    <style> 
        .one { 
            color: green; 
          
        } 
          
        .zero { 
            color: red; 
        } 
    </style> 
</head> 
  
<body ng-app="" 
      style="text-align:center"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
          AngularJS ngClass conditional 
      </h3> 
  
    <div> 
        <input type="button" 
               ng-click="val=1"
               value="1" /> 
        <input type="button" 
               ng-click="val=0" 
               value="0" /> 
        <br><br> 
        <span ng-class="{'one':val==1,'zero':val==0}"> 
            Clicked on: {{val}} 
        </span> 
    </div> 
</body> 
  
</html>

Example 2: This example illustrates how to use the ‘OR’ operator to mention an expression for the ngClass in AngularJS

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>AngularJS ngClass conditional</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> 
    </script> 
    <style> 
        .one { 
            font-size: 2rem; 
            color: green; 
        } 
          
    </style> 
</head> 
  
<body ng-app="" 
      style="text-align:center"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        AngularJS ngClass conditional 
    </h3> 
  
    <div> 
        <input type="button"
               ng-click="val=1" 
               value="1" /> 
        <input type="button"
               ng-click="val=0"
               value="0" /> 
        <input type="button"
               ng-click="val=2" 
               value="2" /> 
        <br><br> 
        <span ng-class="{'one':val==1 || val==2}"> 
            Clicked on: {{val}} 
        </span> 
    </div> 
</body> 
  
</html>

Example 3: This example illustrates how to use a ternary operation as the expression for the ngClass.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>AngularJS ngClass conditional</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> 
    </script> 
    <style> 
        span{ 
            font-size: 2rem; 
        } 
        .even{ 
              
            color: green; 
          
        } 
        .odd{ 
            color: red; 
        } 
          
    </style> 
</head> 
  
<body ng-app="" 
      style="text-align:center"> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        AngularJS ngClass conditional 
    </h3> 
  
    <div> 
        <input type="button" 
               ng-click="val=0" 
               value="0" /> 
        <input type="button" 
               ng-click="val=1" 
               value="1" /> 
  
        <input type="button" 
               ng-click="val=2" 
               value="2" /> 
        <input type="button" 
               ng-click="val=3" 
               value="3" /> 
        <br><br> 
        <span ng-class="val%2 == 1 ? 'odd':'even'"> 
            Clicked on: {{val}} 
        </span> 
    </div> 
</body> 
  
</html>