AngularJS ng-class Directive Last Updated : 01 Aug, 2022 Comments Improve Suggest changes Like Article Like Report The ng-class Directive in AngularJS is used to specify the CSS classes on HTML elements. It is used to dynamically bind classes on an HTML element. The value for the ng-class has either string, an object, or an array. It must contain more than one class name, which is separated by space, in the case of a string. If it is an object, it will contain the key-value pairs, where the key represents the class name for the class that wants to add & value represent the boolean value. If the expression inside the ng-class directive returns true then only the class is added else it is not added. If the value of ng-class is an array then it can be the combination of both strings as well as an array. It is supported by all HTML elements. Syntax: <element ng-class="expression"> Contents... </element>Example 1: This example uses the ng-class Directive to set and reset the CSS class. HTML <!DOCTYPE html> <html> <head> <title>ng-class Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </script> <style> .edit { color: green; font-size: 1.5em; } </style> </head> <body ng-app="" style="text-align:center"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>ng-class Directive</h3> <div> <input type="button" ng-click="edit=true" value="Style" /> <input type="button" ng-click="edit=false" value="Reset" /> <br><br> <span ng-class="{true:'edit'}[edit]"> GeeksforGeeks </span> is the computer science portal for geeks. </div> </body> </html> Output: Example 2: This example uses the ng-class Directive to set the CSS style to the class. HTML <!DOCTYPE html> <html> <head> <title>ng-class Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </script> <style type="text/css"> .index { color: white; background-color: green; } </style> </head> <body ng-app="app" style="padding:20px"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>ng-class Directive</h3> <div ng-controller="geek"> <table> <thead> <th>Select any sorting technique:</th> <tr ng-repeat="i in sort"> <td ng-class="{index:$index==row}" ng-click="sel($index)"> {{i.name}} </td> </tr> </thead> </table> </div> <script> var app = angular.module("app", []); app.controller('geek', ['$scope', function($scope) { $scope.sort = [{ name: "Merge sort" }, { name: "Quick sort" }, { name: "Bubble sort" }]; $scope.sel = function(index) { $scope.row = index; }; }]); </script> </body> </html> Output: Comment More infoAdvertise with us V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Explore AngularJS BasicsAngularJS Tutorial 5 min read Introduction to AngularJS 4 min read Angular CLI | Angular Project Setup 3 min read AngularJS Expressions 2 min read AngularJS Modules 3 min read AngularJS ng-model Directive 4 min read AngularJS Data Binding 4 min read AngularJS Controllers 3 min read AngularJS | Scope 2 min read AngularJS Services 4 min read AngularJS | AJAX - $http 3 min read AngularJS | Tables 2 min read AngularJS Select Boxes 2 min read AngularJS SQL 3 min read AngularJS HTML DOM 2 min read AngularJS Events 3 min read AngularJS | Forms 3 min read AngularJS Form Validation 3 min read AngularJS | API 2 min read AngularJS and W3.CSS 2 min read AngularJS Includes 3 min read AngularJS Animations 1 min read AngularJS | Application 3 min read AngularJS DirectivesAngularJS Directives 9 min read AngularJS ng-app Directive 1 min read AngularJS ng-bind Directive 2 min read AngularJS ng-bind-html Directive 2 min read AngularJS ng-bind-template Directive 2 min read AngularJS ng-blur Directive 1 min read AngularJS ng-change Directive 2 min read AngularJS ng-checked Directive 2 min read AngularJS ng-class Directive 2 min read AngularJS ng-class-even Directive 2 min read AngularJS ng-class-odd Directive 2 min read AngularJS ng-click Directive 2 min read AngularJS ng-cloak Directive 2 min read AngularJS ng-controller Directive 2 min read AngularJS Directives Complete Reference 2 min read AngularJS FiltersAngularJS | Filters 7 min read AngularJS currency Filter 2 min read AngularJS | date Filter 2 min read AngularJS filter Filter 3 min read AngularJS json Filter 2 min read AngularJS limitTo Filter 2 min read AngularJS lowercase Filter 1 min read AngularJS number Filter 1 min read AngularJS orderBy Filter 4 min read AngularJs uppercase Filter 1 min read AngularJS Converting FunctionsAngularJS angular.lowercase() Function 2 min read AngularJS angular.uppercase() Function 1 min read AngularJS angular.forEach() Function 1 min read AngularJS Comparing FunctionsAngularJS angular.isArray() Function 2 min read AngularJS angular.isDate() Function 2 min read AngularJS angular.isDefined() Function 2 min read AngularJS angular.isElement() Function 2 min read AngularJS angular.isFunction() Function 2 min read AngularJS angular.isNumber() Function 2 min read AngularJS angular.isObject() Function 2 min read AngularJS | angular.isString() Function 1 min read AngularJS angular.isUndefined() Function 2 min read AngularJS angular.equals() Function 2 min read AngularJS angular.toJson() Function 2 min read AngularJS QuestionsHow to bundle an Angular app for production? 4 min read How to add many functions in one ng-click directive? 2 min read How to directly update a field by using ng-click in AngularJS ? 3 min read How to Add Dynamic Options for Multiple Selects Inside ng-repeat Directive ? 3 min read How to detect when an @Input() value changes in Angular? 3 min read How to open popup using Angular and Bootstrap ? 2 min read How to reload or re-render the entire page using AngularJS? 2 min read How to add input fields dynamically on button click in AngularJS ? 2 min read How to Create Button Dynamically with Click Event in Angular ? 2 min read How to use jQuery in Angular ? 2 min read AngularJS Examples 2 min read Like