NgClass: How to assign CSS classes in Angular

In this tutorial, we are going to take a look how we can use CSS classes with angular.

We will take a look at different methods to dynamically assign a CSS class to an element using the className directive.

We will also learn, how we can toggle that class on or off, depending on the state of the application with NgClass.

Before we do that, we take a look at how CSS classes are assigned using regular JavaScript and then compare that to the angular way.

Ready?

Let's get started!

Adding CSS classes without Angular

So how did we assign CSS classes in JavaScript before we knew angular?

First of all, we had to find the DOM-element we wanted to assign the class to. In the best case, we would find that element by id like this:

let element = document.getElementById('exampleDiv')

Afterward, we could use the JavaScript DOM-API to assign a className.

element.className = 'example-class'

DOM-Manipulation in plain old JavaScript always felt like a pain.

This is no exception.

Maybe this example is to simple to point that out properly, but what would you do if you wanted to assign a class based on a codition?

How to assign a CSS class in Angular using the [className] property binding

Angular, like other single page application frameworks, realy shines when it comes to data-binding. That means, that the DOM is automatically updated, whenever the corresponding JavaScript object changes.

This is the same for CSS classes.

We can just bind a property to the className attribute of our HTML-elements. Just like we would with other attributes like img-src.

<div [className]="'example-class'"></div>

This example would have exactly the same result as the exmaple above.

But what is the point of having dynamically updated DOM-bindings when using static values?

Basically we can execute any statement inside of that binding, that results in a string.

This allows us to add classes based on a condition:

<div [className]="condition ? 'example-class' : 'other-class'"></div>

That way, the example-class is added, when the codition is true. If the conditions is false, the example-class is removed and the other-class added to the DOM-element instead.

Or we could build the class name at runtime:

<div [className]="'class' + someValue"></div>

How to toggle CSS classes in Angular

When it comes to toggling CSS classes based on a condition, the syntax shown above is quite inconvenient.

A better way to do this, is by using the class.name directive. With that directive, we can easily toggle CSS classes like so:

<div [class.example-class]="condition"></div>

As you can see, this directive starts with the keyword "class" followed by the name of the CSS class you want to toggle, separated by a dot. While this syntax is not much shorter, it has the advantage, that its meaning is clear at first sight: We want to toggle a class.

Using the general syntax shown in the previous chapter, that is not the case. The programmer has to read the whole statement first, before it is clear what it does.

Using the ngClass directive for convenience

I turns out, all the methods we discovered above can be replaced by the ngClass directive.

This directive is just syntactic sugar, to make the code look more streamlined. In some cases, it is also shorter or convenient to use, as well.

The directive itself is very versatile. Depending on the input, it can do a lot of different things.

For example, if we just wanted to assign a static class name, we would do so like this:

<div [ngClass]="'example-class'"></div>

NgClass can also assign multiple static class names all at once:

<div [ngClass]="['example-class', 'other-class']"></div>

If we want to toggle CSS classes based on a condition, we pass in a JavaScript object. The keys of the object are the class names and the values represent the conditions.

<div
  [ngClass]="{
  'example-class': condition
}"
></div>

We can also use ngClass to assign multiple CSS classes based on multiple conditions.

<div
  [ngClass]="{
  'example-class': condition,
  'other-class': !condition
}"
></div>

Conclusion

In this tutorial, we discovered how we can use the ngClass directive to assign classes dynamically using angular.

I hope you like this article. If you did, please share it with your friends!

Happy Coding!

Angular: Everything you need to get started

November 09, 2017

Angular NgFor: Everything you need to know

May 09, 2018

How to use *ngIf else in Angular

May 11, 2018