AngularJS | ng-class Directive

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

My Personal Notes

Recommended Posts: