ng-class directive in AngularJS


The ng-class directive allows you to apply css classes dynamically using expression. the expression value can be in three different ways.

  • If expression value is a string, if it is having more than one class name then class names should be space delimited
  • If expression value is an object, then for each key value pair of the object a true/false. key is used as class name and value is true then the class will be applied to the element
  • If expression value is an array, each element of the array must be a string or an object i.e. either one of the above two

Example:
Example-1:

Enter class names with spaces :

Class names entered in the textbox are applied.

Example-2:




Select the checkbox to apply CSS classes.

Example-3:
Enter class names with spaces :

Apply CSS classes dynamically.


Source code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .greenbg { background: green; } .bluebg { background: blue; } .yellowbg { background: yellow; } .red { color: red; } .white { color: white; } .padding10 { padding: 10px; } .padding20 { padding: 20px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> <strong>Example-1:</strong><br /> <br /> Enter class names with spaces : <input type="text" ng-model="customstyle1" style="width: 200px" /> <p ng-class="customstyle1"> Class names entered in the textbox are applied. </p> <strong>Example-2:</strong><br /> <br /> <label> <input type="checkbox" ng-model="cbgreen" />Green background </label> <br /> <label> <input type="checkbox" ng-model="cbwhite" />White color </label> <br /> <label> <input type="checkbox" ng-model="cbpadding" />Add 20px padding </label> <br /> <p ng-class="{greenbg:cbgreen, white:cbwhite, padding20:cbpadding }"> Select the checkbox to apply CSS classes. </p> <strong>Example-3:</strong><br /> Enter class names with spaces : <input type="text" ng-model="customstyle2" style="width: 200px" /> <br /> <label> <input type="checkbox" ng-model="cbblue" />Blue background </label> <br /> <p ng-class="[customstyle2, {bluebg: cbblue}]"> Apply CSS classes dynamically. </p> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.customstyle1 = "yellowbg red padding10"; $scope.cbgreen = true; $scope.cbwhite = true; $scope.cbpadding = true; $scope.customstyle2 = "padding10"; $scope.cbblue = true; }); </script> </body> </html>