AngularJS ng-class Directive

The AngularJS ng-class directive facilitates you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added. It may be a String, an object or an array.

In case of a string, it should contain one or more, space-separated class names. In case of an object, it should contain key-value pairs, where the key is the class name of the class you want to add, and the value is a Boolean value. In the case of an array, it can be a combination of both.

Note: The ng-class directive is supported by all HTML elements.

Syntax:

Parameter explanation:

expression: It specifies an expression that returns one or more class names.

Let's take an example to demonstrate ng-class directive.

See this example:

 <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.normal {
    color:white;
    background-color:grey;
    padding:20px;
    font-family:"Courier New";
}
.medium {
    color:white;
    background-color:brown;
    padding:30px;
    font-family:"Courier New";
}
.advance {
    background-color:red;
    padding:40px;
    font-family:Verdana;
}
</style>
<body ng-app="">
<p>Choose a class:</p>
<select ng-model="home">
<option value="normal">Normal</option>
<option value="medium">Medium</option>
<option value="advance">Advance</option>
</select>
<div ng-class="home">
  <h1>Welcome To JavaTpoint!</h1>
  <p>A solution of all technologies!</p>
</div>
</body>
</html>

Test it Now

Next TopicAngularJS ng-class-even Directive

← prev next →