AngularJS | ng-class Directive - GeeksforGeeks

29 Mar, 2019
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. If the expression inside the ng-class directive returns true then only the class is added else it is not added. It is supported by all HTML elements.
Syntax:
<element ng-class="expression"> Contents... </element>
Example 1: This example uses ng-class Directive to set and reset CSS class.
<!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>    <h2>ng-class Directive</h2>      <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:Before Clicking the button:After Clicking the style button:
Example 2: This example uses ng-class Directive to set the CSS style to the class.
<!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>    <h2>ng-class Directive</h2>      <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:Before Selecting the element:After Selecting the element:
AngularJS-Directives
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Angular | keyup event
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?