AngularJS ngclass Directive (original) (raw)

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:

Contents...

Example 1: This example uses the ng-class Directive to set and reset the CSS class.

HTML `

ng-class Directive

GeeksforGeeks

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

`

Output:

Example 2: This example uses the ng-class Directive to set the CSS style to the class.

HTML `

ng-class Directive

GeeksforGeeks

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

`

Output: