Questions And Answers

More Tutorials

Angular ng-class directive

Three types of ng-class expressions

Angular supports three types of expressions in the ng-class directive.

1. String

<span ng-class="MyClass">Sample Text</span>

Specifying an expression that evaluates to a string tells Angular to treat it as a $scope variable. Angular will check the $scope and look for a variable called "MyClass". Whatever text is contained in "MyClass" will become the actual class name that is applied to this . You can specify multiple classes by separating each class with a space.

In your controller, you may have a definition that looks like this:

$scope.MyClass = "bold-red deleted error";

Angular will evaluate the expression MyClass and find the $scope definition. It will apply the three classes "boldred", "deleted", and "error" to the element.

Specifying classes this way lets you easily change the class definitions in your controller. For example, you may need to change the class based on other user interactions or new data that is loaded from the server. Also, if you have a lot of expressions to evaluate, you can do so in a function that defines the final list of classes in a $scope variable. This can be easier than trying to squeeze many evaluations into the ng-class attribute in your HTML template.

2. Object

This is the most commonly-used way of defining classes using ng-class because it easily lets you specify evaluations that determine which class to use.

Specify an object containing key-value pairs. The key is the class name that will be applied if the value (a conditional) evaluates as true.

 .red { color: red; font-weight: bold; }
 .blue { color: blue; }
 .green { color: green; }
 .highlighted { background-color: yellow; color: black; }
<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted
}">Sample Text</span>
<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3. Array

An expression that evaluates to an array lets you use a combination of strings (see #1 above) and conditional objects (#2 above).

 .bold { font-weight: bold; }
 .strike { text-decoration: line-through; }
 .orange { color: orange; }
<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

This creates a text input field bound to the scope variable UserStyle which lets the user type in any class name(s). These will be dynamically applied to the < p > element as the user types. Also, the user can click on the checkbox that is data-bound to the warning scope variable. This will also be dynamically applied to the < p > element.


In this page (written and validated by ) you learned about AngularJS ng-class directive . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS ng repeat.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.