Open In App
Related Articles

AngularJS ngClass Conditional

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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=
    </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=
    </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=
    </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>

                    

 


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


Last Updated : 07 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials