AngularJS (38 Blogs) Become a Certified Professional

Angular ngClass : Know All About the ngClass Directive

Published on Sep 30,2019 52 Views
6 / 14 Blog from Introduction to Angular

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

Angular has emerged as one of the most widely accepted front-end development frameworks. A major reason for this was the simplicity provided for performing trivial tasks, that would generally take a lot of time when using vanilla JavaScript. One such feature is the usage of directives in AngularJS. In this particular blog, we will be looking into the ngClass directive. The following topics are covered in this blog:

 

What is ngClass?

ngClass is a directive. It is Angular’s way of allowing you to use different classes and styles based on what’s happening in your angular-component. While CSS covers many scenarios with pseudo-classes, you’ll often run into scenarios where you need to apply classes based on certain conditions. This is where ngClass comes to the rescue.

What are Directives?


Directivesangular directive -ngClass Angular - edureka are markers on a DOM element that tell Angular to attach a specified behaviour to that DOM element or even transform the DOM element and its children. In short, it extends the HTML. Most of the directives in Angular are starting with ng- where ng stands for Angular. Angular includes various built-in directives. In addition to this, you can create custom directives for your application. ngClass comes under built-in directives.

How to Use the ngClass Directive

The ng-class directive dynamically binds one or more CSS classes to an HTML element. The value of the ng-class directive can be a string, an object, or an array. If it is a string, it should contain one or more, space-separated class names. As an object, it should contain key-value pairs, where the key is the class name of the class you want to add, and the value is a boolean value. The class will only be added if the value is set to true. Implemented as an array, it can be a combination of both. Each array element can be either a string or an object, described as above.

The following example shows how to change the colour of a <div> using ngClass:


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.sky {
color:white;
background-color:lightblue;
padding:20px;
font-family:"Courier New";
}
.tomato {
background-color:coral;
padding:40px;
font-family:Verdana;
}
</style>
<body ng-app="">

<p>Choose a class:</p>

<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>

<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div>

</body>
</html>

The code will present you with a page that has a dropdown box selector for two classes.

output dd - ngclass - edureka

This is what it looks like when you choose the two different classes. The ngClass directive dynamically applies the styling to the same page without a reload.

With this, I’d like to end my blog here. If you have any doubts or queries regarding this article please post them in the comment section below. If you would like to learn all that you just learnt from this blog and more, about angular, and gear your career towards a proficient angular developer, then consider enrolling for our Angular Certification Course. 

Got a question for us? Please mention it in the comments section of this “Angular ng-class” and we will get back to you.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.