EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS ng-class
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJS ng-class

By Kinjal LodhaKinjal Lodha

AngularJS ng-class

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:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

There are various ways to write ng-class directive within HTML Tags.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,883 ratings)

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:

  1. 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
  2. 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.
  3. 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

AngularJS ng-class 1

Output 2: On click of Block A

AngularJS ng-class 2

Output 3: Default state when no value is selected in Dropdown

AngularJS ng-class 3

Output 4: Select Square from Dropdown

output 5

Output 5: Select Circle from Dropdown

output 5-1

Output 6: Default state before applying animation

output 5-2

Output 7: On Click on Square animation occurs

output 7 

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 –

  1. AngularJS ng-disabled
  2. Angular Time Picker
  3. AngularJS Custom Filter
  4. AngularJS Currency Filter
Popular Course in this category
Angular JS Training Program (9 Courses, 7 Projects)
  9 Online Courses |  7 Hands-on Projects |  64+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more