NgClass usage

Maria Cristina Di Termine
22-12-2016

AngularJS is one of the most powerful frameworks of based on JavaScript we have at the moment. Mainly, his power is focussed to extend the HTML vocabulary, making your projects readable, clean and quick to develop. This can be possible by the use of directives.

AngularJS provides several directives to manipulate the DOM injecting Angular behaviors to specified elements. One of those directives is called NgClass and it allows us to add or remove CSS classes in the view, easily to our liking.

Basically, the directive ngClass, binds an expression to add eventually all the classes we want to use. Ng Class can work in 3 different ways based on how we decide to represent the expression:
– as a string
– as an object
– as an array

Remember: If the expression changes, then the class that was added will be removed. NgClass does not duplicate classes that already exist in that specific element.

NgClass using a string
This is the easiest method to use ngClass. We need just to add an Angular variable to ng-class and that will become the class we will add to the element.

Example:

<div ng-class="my-class"></div>

Of course we can play with the power of data-bind using also ngModel to bind dynamically an element to another.
Using ngModel, everything is typed into the input will be used as a class for the div having the relative ngClass, like here for example:

<!-- Here set ngModel -->
<input type="text" ng-model="myclass">

<!-- Here set ngClass -->
<div ng-class="myclass"></div>

NgClass using an object
We can decide to evaluate the expression to an object to add a class based on the boolean value of the key-value of the object. It means for example that, if we have an object with one or more keys, we can set a class to be added only when the correspondent key is true.
Example:

<div ng-class="{ 'my-first-class': myFirstClass, 'my-second-class': mySecondClass }"></div>

If “myFirstClass” is true, add the class ‘my-first-class’. If “mySecondClass” is true, add the class ‘my-second-class’.

Be careful! If you use classes with hyphens (my-first-class or my-class) remember to put single quotes around the class. The key must be a valid identifier object literals like in JavaScript and Angular requires that.

By the way, objects and conditionals in ngClass can be also more complex that that. If we can add a class when a specific key-value is true, we can also set a class if one key-value is false. That is possible using the sign “!” in front of the key. That sign in JavaScript means literally “not”, therefore “not” true, that is “false”. Here an example:

<div ng-class="{ 'my-first-class': myFirstClass, 'my-second-class': !myFirstClass }"></div>

If we refer to the same key-value then it’s better maybe to write it in this way:

<div ng-class="{true: 'my-first-class', false: 'my-second-class'}[myFirstClass]"></div>

One last method we can consider if we need to write a conditional is the Ternary Operator, introduced in Angular since the version 1.1.4. It use two other signs: “?” and “:”.
Example:

<div ng-class="{myFirstClass ? 'my-first-class' : 'my-second-class'}"></div>

Translating it is exactly like an if statement: if (myFirstClass == true) ? //use class ‘my-first-class’ : //else use ‘my-second-class’.
NgClass using an array
This method is very similar to ngClass using a string. The difference is only that we can set multiple class referring different elements and we do this evaluating ngClass to an array. Here a simple example:

<input type="text" ng-model="myClassOne">
<input type="text" ng-model="myClassTwo">

<div ng-class="[myClassOne, myClassTwo]"></div>

Like that, the div will get both the classes from the two input above.
One last curiosity about ngClass is that you can also inject it in 2 different ways: as a class or as an attribute.
Example:

<!-- Ng as an attribute -->
<div class="normal-class" ng-class="my-class"></div>

<!-- Ng as a class -->
<div class='normal-class ng-class="my-class"'></div>

The most common and used is the attribute but is also good to know it can also be injected into the attribute “class” like it is a css class. I honestly prefer to inject it as an attribute because it is just clearer and easy to read but both the methods work in the same way, no different behaviours.

LEAVE A REPLY

you might also like