The ng-class directive in Angular
For dynamically adding or removing the CSS classes from the HTML elements like div, span, input fields etc. you may use the ng-class directive.
You may specify the CSS classes in different ways in the value of ng-class directive.
Following are the ways:
- One way is to use the string in the value of ng-class for specifying CSS class names. There, you may specify one or more classes. If you specify more than one class then separate those by spaces. For example:
<p ng-class=”className className2″>Content here </p>
- You may also use an object as the expression. In that case, the true value keys will be used as class names.
- The expression in the ng-class can also be an array. The array elements can be strings or objects as in above two cases.
See the following section for using the ng-class Angular directive in different ways.
A demo of ng-class with a div and textbox
In this example, a number of CSS classes are created in the <style> section. A textbox is given where you may enter any class name from the given classes. You can see the available class names in the textbox as the demo page loads. The entered class will apply to the text given in the div element by using ng-class directive.
See online demo and code
The code:
<body ng-app=""> <h4>Enter a class name from available classes:</h4> <div class="form-group col-sm-4"> <input type="text" class="form-control" placeholder="redclass greenclass yellowclass blueclass" ng-model="ngclassdemo"> </div> <br /><br /> <div ng-class="ngclassdemo"> <h3>This is a ng-class demo!</h3> </div> </body>
The CSS used in example:
.redclass {
color:#D50000;
background-color:#FFE1E1;
border: 2px solid #FF5353;
font-size:20px;
width:300px;
}
.blueclass {
color:#004A95;
background-color:#C4E1FF;
border: 2px dashed #64B1FF;
font-size:20px;
width:300px;
}
.greenclass {
color:#008040;
background-color:#BBFFDD;
border: 2px dotted #4FFFA7;
font-size:20px;
width:300px;
}
.yellowclass {
color:#D9D900;
background-color:#FFFF84;
border: 2px solid #757500;
font-size:20px;
width:300px;
}
An example of ng-class with array
In this example, an array of CSS class names is created in the controller part. The class names are assigned to HTML select dropdown as the web page loads. As you select a class name, the class is applied to the div element. Have a look by clicking the link or image below:
See online demo and code
The code:
<body ng-app="ngClassdapp">
<div ng-controller="ngClassController">
<div class="form-group col-sm-4">
Select a Class Name: <select ng-model="ngClassDemo" ng-options="clsoptions.CSSClass as clsoptions.CSSClass for clsoptions in applyClass"></select><br />
</div>
<br /><br />
<div ng-class="[ngClassDemo]">The CSS class is applied here by using ng-class</div>
<script>
var app = angular.module("ngClassdapp", []);
app.controller('ngClassController', ['$scope', function ($scope) {
$scope.applyClass = [{ CSSClass: "redclass" }, { CSSClass: "greenclass" }, { CSSClass: "blueclass" }, { CSSClass: "yellowclass" }];
}]);
</script>
Using a Boolean expression in ng-class with HTML table
In this example, the Boolean expression is used in the ng-class directive. The ng-class is used in the table tag of HTML. A checkbox is given which value can be true or false. If this is false (unchecked), the redclass will be applied to the table. If true, the greenclass will apply. Initially, the table is given a few Bootstrap built-in classes:
See online demo and code
The code:
<div class="form-group col-sm-4">
Check for green class / Uncheck for redclass <input type="checkbox" ng-model="tablecls" />
</div>
<br /><br />
<table class="table table-bordered table-striped" ng-class="{true:'greenclass',false:'redclass'}[tablecls]">
<tr>
<th>Product Code</th>
<th>P Name</th>
<th>P Quality</th>
<th>P Quantity</th>
</tr>
<tr>
<td>10</td>
<td>Wheat</td>
<td>Great</td>
<td>50 Bags</td>
</tr>
<tr>
<td>20</td>
<td>Rice</td>
<td>Good</td>
<td>100 Bags</td>
<tr>
<td>30</td>
<td>Sugar</td>
<td>Good</td>
<td>111 Bags</td>
</tr>
</table>
Get the complete code from the demo page.
A demo of using the ternary operator or “if…else”
You may also use ternary operators in the Angular ng-class attribute for conditionally applying one or more classes to the HTML elements. The ternary operators work like the if..else statement, so, you will use one or more conditions to apply CSS classes.
See this example where I used a textbox for entering the numbers. If you enter the number less than or equal to 10 then the greenclass will apply. If the number is greater than 10 and less than 20, the redclass will apply. The third condition is to check the number greater than 20. So, if the number is more than 20, the blueclass will apply along with Bootstrap’s well class.
The default class is yellowclass which is applied as the demo page loads, have a look:
See online demo and code
The code:
<body ng-app=""> <br /> <div class="col-md-5"> Enter a Number: <input type="text" ng-model="ngclassNo" /> </div> <br /><br /> <div ng-class="ngclassNo <= 10 ? 'greenclass' : ngclassNo <= 20 ? 'redclass well' : (ngclassNo > 20 ? 'blueclass well' : 'yellowclass')"> A demo of ng-class with ternary operators (if..elseif..else) </div> </body>
Following is the CSS used that will apply conditionally:
.redclass {
color:#B30000;
background-color:#FFD2D2;
border: 2px solid #FF1A1A;
font-size:18px;
width:300px;
margin-left:22px;
}
.blueclass {
color:#005CB9;
background-color:#D7EBFF;
border: 2px dashed #2492FF;
font-size:20px;
width:300px;
margin-left:20px;
}
.greenclass {
color:#006A35;
background-color:#9DFFCE;
border: 2px dotted #09FF84;
font-size:18px;
width:250px;
margin-left:15px;
}
.yellowclass {
color:#D9D900;
background-color:#FFFF84;
border: 2px solid #757500;
font-size:20px;
width:250px;
margin-left:18px;
}
You may use as many conditions as you need by using ternary operators. Also, you may define the default class. If you want to use multiple classes then separate those by space.