Definition of AngularJS ng-class
AngularJS ng-class is an In-Built AngularJS directive that is used in the HTML view for designing a web page and using CSS styles which can be handled conditionally and dynamically based on evaluation of an expression. This directive comes into usage whenever a developer needs to handle CSS styling on HTML views dynamically based on some conditions or add a list of CSS classes dynamically based on model value or just defining a string in ng-class directive. This can be used with any HTML tag such as div, span, paragraph, select, input, etc. AngularJS ng-class directive won’t add the same classes again if it’s already added to that HTML element.
Syntax:
There are various ways to write ng-class directive within HTML Tags.
Using ng-class directive where expression evaluates to a String
<div ng-class=”expressionAsString”></div>
Another way for writing using ng-class is to add conditional expression such as binary or ternary operator
<div ng-class=”{‘className1’ : modalValue, cssProperty: modalValue2}”></div>
Using ng-class with an array of classes in HTML tag
<div ng-class=”[cssStyle1, cssStyle2, cssStyle3]”></div>
ng-class directive can be used with any HTML element and can be used conditionally, as a string or as an Array of Styles.
How ng-class Directive works in AngularJS?
In AngularJS framework, it is very important to know that all the In-Built directive which have been provisioned by AngularJS framework will always be denoted with ng prefix.
The ng-class directive is a very simple and very easy to use the directive in HTML view. This directive is used to handle any sort of conditions a developer needs to add while adding different or multiple CSS styles to HTML element, say the developer needs to keep changing the color of the webpage based on some criteria like scrolling effect, on click of a checkbox, on change of some value in a controller or any other complex logic in the controller all of it can be solved just by using ng-class directive as an attribute in any HTML Element. The ng-class directive can be utilized in the following 3 different ways in HTML view:
- Using ng-class directive with an expression as an object of key-value pair, where the key is the CSS class name OR any CSS property (like bold, italic) and value will be expression evaluation(model value or some conditional statement) and based on the truth value of value filed the corresponding key is applied
- Using ng-class directive with an expression which evaluates as a String, where the string can be a modal value having CSS property defined and can be dynamically added.
- Using ng-class directive with an expression as an Array of either objects or string or combination of both. This will help in adding more classes to the HTML element based on the conditional evaluation.
Ng-class directive can also be used to handle the View and CSS styling based on the model value, so as and when the model value changes ng-class will get executed and update the CSS styling as well.
Ng-class directive is executed at priority level 0 and has few limitations as well in terms of interpolation. ng-class directive works absolutely fine with CSS animations and will apply additional CSS classes to the start and end of an animation, but this will not disturb any pre-existing CSS transitions which is already present on the HTML element.
Examples of AngularJS ng-class
Lets us discuss examples of AngularJS ng-class.
Example #1
Index.html
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<style>
h2 {
color: blue;
text-align: center;
}
.selected-block {
background-color: #3373FF;
color: white;
width: 70px;
height: 50px;
border: 3px solid black;
padding: 50px;
margin: 20px;
cursor: pointer;
}
.unselected-block {
background-color: lightgrey;
color: black;
width: 70px;
height: 50px;
border: 3px solid black;
padding: 50px;
margin: 20px;
cursor: pointer;
}
.square {
width: 30px;
height: 30px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
.circle {
height: 200px;
width: 200px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.rectangle {
width: 150px;
height: 10px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
.animation-class {
transition: all linear 0.5s;
}
</style>
<body>
<div ng-controller="ngClassCtrl">
<h2>Using ng-class as Object with Key value pair
<h2>
<div ng-class="{'selected-block': blockA, 'unselected-block' : !blockA}" ng-model="blockA"
ng-click="blockA=!blockA">
Block A
</div>
<br><br>
<h2>Using ng-class as String</h2>
<div>Select Geometeric Shapes :</div>
<br>
<select ng-model="geometricShapes">
<option value="square">Sqaure</option>
<option value="circle">Circle</option>
<option value="rectangle">Rectangle</option>
</select>
<div ng-class="geometricShapes"></div>
<h2>Using ng-class as Array</h2>
<div>Select Geometeric Shapes :</div>
<br>
<input type="button" value="Square" ng-click="geoShape='square'">
<input type="button" value="circle" ng-click="geoShape='circle'">
<input type="button" value="Rectangle" ng-click="geoShape='rectangle'"><br><br>
<div class="animation-class" ng-class="geoShape"></div>
</div>
</body>
</html>
Script.js
function ngClassCtrl($scope) {
}
The above example shows how easily and in how many various different way ng-class directive can be used in AngularJS HTML view and tweaked around conditions as the developer wants to. At the first, we are using ng-class directive conditionally based on Boolean variable block, and according to the truth value, the ng-class directive will pick up the CSS class to be applied to that particular HTML element.
One more example of ng-class which has been used above is to directly use ng-class directive to evaluate as String, where whatever value is selected in a dropdown that CSS class will get applied to HTML element.
The last Example of the ng-class directive shows how animation can be used along with ng-class and it would just work as expected without causing any issues to existing animation or CSS properties.
<div ng-class="{'selected-block': blockA, 'unselected-block' : !blockA}" ng-model="blockA"
ng-click="blockA=!blockA">
Here ng-class directive is used conditionally, where on click of block the blockA variable changes to true, and as soon as it gets true the CSS class ‘selected-block get applied to this Block and vice versa.
<select ng-model="geometricShapes">
Here simply select HTML tag is used with ng-model value as geometricShapes.
<option value="square">
Inside the select HTML tag, each option field consists of different shapes where value is square, circle, and rectangle. So on change of dropdown, the value will get updated and stored in geometricShapes model value
<div ng-class="geometricShapes"></div>
This div block is used to display different CSS styles based on what model value is selected from the dropdown and here ng-class has used a String
<input type="button" value="Square" ng-click="geoShape='square'">
This input type button where on click of this button the model value geoShape is changed to square value.
<div class="animation-class" ng-class="geoShape">
This is a div block that will apply CSS class geoShape along with existing animation in the animation-class.
Output 1: The default state of Block A when it’s not clicked
Output 2: On click of Block A
Output 3: Default state when no value is selected in Dropdown
Output 4: Select Square from Dropdown
Output 5: Select Circle from Dropdown
Output 6: Default state before applying animation
Output 7: On Click on Square animation occurs
Conclusion
ng-class is a directive in AngularJS which is commonly used In-Built AngularJS directive which is used for designing the HTML view using CSS properties with conditional abilities, as a string and an array of CSS classes. There are various different forms of using this directive and proper syntax is all that is needed and you are ready to go.
Recommended Articles
This is a guide to AngularJS ng-class. Here we also discuss the definition and How ng-class Directive works in AngularJS? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
