AngularJS ng-class Directive

Last Updated : 01 Aug, 2022

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>