Skip to content
Related Articles

Related Articles

AngularJS | ng-class Directive
  • Last Updated : 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=
    </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:
ngclass
After Clicking the style button:
ngclass

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=
    </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:
ngclass
After Selecting the element:
ngclass




My Personal Notes arrow_drop_up
Recommended Articles
Page :