ngClass, ngClassEven And ngClassOdd Directive In AngularJS

Introduction

AngularJS provides many built-in directives. In this article we will discuss about ngClass, ngClassEven and ngClassOdd directives.

ngClass

This directive allow us to set CSS class to the HTML element dynamically using binding expression representing which classes to be added.

This directive can be used by three ways and it identify by how we pass the expression

1. Pass expression as a string: String should contain one or more space-delimited class names which want to set to the element

Example

HTML

<h5>1) Expression pass as a string.</h5>
<div ng-controller="HomeController">
    <div ng-class="className">This is my ngClass Test</div>
    <input ng-model="className" placeholder="Type: italic bold error" />
    <br />
</div>

CSS class

.italic
{
    font - style: italic;
}.bold
{
    font - weight: bold;
}.red
{
    color: red;
}.error
{
    color: red;
}

Output



2. Pass expression as an object: Object contains key-value pair. If expression pass as an object corresponding key is used as class name through which object value is set to true.

Example

HTML

<h4> 2) Expression pass as an object.</h4>
<div ng-controller="HomeController">
    <div ng-class="{italic: italic, bold: bold, 'error': error}">This is my ngClass Test</div>
    <br />
    <label>
        <input type="checkbox" ng-model="italic"> Apply "italic" class </label>
    <br>
    <label>
        <input type="checkbox" ng-model="bold"> Apply "bold" class </label>
    <br>
    <label>
        <input type="checkbox" ng-model="error"> Apply "Error" class </label>
</div>

CSS class is same as previous example.

Output



3. Pass expression as an array: This is mix mode of pass expression as string and object. Array is predefined in length. In the following example, array contains three expressions (classname1, classname2 and classname3) each are bind with textbox. When the value of text box is changed, expression value also change.

Example

HTML

<h5>3) Expression pass as an object.</h5>
<div ng-controller="HomeController">
    <div ng-class="[className1,className2,className3]">This is my ngClass Test</div>
    <input ng-model="className1" placeholder="Class name (1) Type: italic bold error" />
    <br />
    <input ng-model="className2" placeholder="Class name (2) Type: italic bold error" />
    <br />
    <input ng-model="className3" placeholder="Class name (3) Type: italic bold error" />
    <br />
</div>

CSS class is same as previous example.

Output:



This directive does not add duplicate class if any class was already assigned to the element. When expression is changed, existing applied classes are removed and new classes are applied.

ngClassEven / ngClassOdd

ngClassEven and ngClassodd directives work in conjunction with ngRepeat directive. The behavior is same as ngClass directive. This applied CSS classes to even/odd rows.

Example

HTML

<h4>ngClassEven / ngClassOdd Example</h4>
<div ng-controller="HomeController">
    <ol>
        <li ng-repeat="name in names"> <span ng-class-odd="'oddClass'" ng-class-even="'evenClass'">
{{name}}
</span> </li>
    </ol>
</div>

Controller

var app = angular.module("app", []);
app.controller("HomeController", function ($scope)
{
    $scope.names = ["Tejas", "Jignesh", "Rakesh"]
});
CSS Class: .oddClass
{
    background - color: gray;
}.evenClass
{
    background - color: white;
}

Output



Summary

The ngClass, ngClassEven and ngClassOdd are important directives to apply CSS classes dynamically in AngularJS. This article will help you to learn all of them.