AngularJS ngClass Conditional Last Updated : 07 May, 2023 Comments Improve Suggest changes Like Article Like 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= "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> Comment More infoAdvertise with us Next Article AngularJS ng-change Directive A aniluom Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads Angular Conditional Class with *ngClass In this article, we will see the basic implementation of the Conditional class with *ngClass in Angular, along with understanding their implementation with the help of examples. Conditional class with *ngClassAngular's *ngClass directive allows us to apply CSS classes conditionally to an element. It 5 min read AngularJS ng-model Directive The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations. 4 min read AngularJS ng-change Directive The ng-change Directive in AngularJS is used whenever the value of an input element changes. The expression is evaluated immediately whenever there is a change in the input value. It requires an ng-model directive to be present. It is triggered whenever there is any single change in the input. It ca 2 min read Class Binding in Angular 8 Class binding in Angular makes it very easy to set the class property of a view element. We can set or remove the CSS class names from an element's class attribute with the help of class binding. We bind a class of a DOM element to a field that is a defined property in our Typescript Code. Its synta 2 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 Like