Ways To Use Angular Classes With NgClass

With Angular, we have many ways to add, remove and replace classes. We can choose a separate class and link a property, or we can use Angular's impressive NgClass instruction.

In this publication, we will explore the course link, as well as Angular's NgClass instruction, grammar, and some best practices.

Table of contents

• Angular's NgClass Directive
• Mixing class and NgClass
• Property binding with "class"
• Property binding with className
• Multiple Classes with NgClass

It is often necessary to add some "state" to the DOM through classes. Let's explore some of Angular's shortcuts.

Angular’s NgClass Directive

When we expect to add more than one class, we should use NgClass.

The basic syntax of NgClass:

• string | string[] | Set<string> | { [klass: string]: any }

This means that we can provide simple strings, arrays of strings, collections of strings, and object literals. In fact, we are concerned with literal methods of objects. Chains and matrices of chains allow us to build classes but we cannot eliminate them because there is no conditional data to support their existence:

• <div [ngClass]="'active'"></div>
• <div [ngClass]="['active', 'open']"></div>

So, let’s investigate object literals with NgClass:

• <div [ngClass]="{active: condition}"></div>

Just like our previous example of using [class.active], this is basically the same.

Remember, however, we cannot do this:

• <!-- errors -->
• <div [ngClass]="{is-active: condition}"></div>

why? Because it is a literal object, you cannot use a string syntax to configure keys with hyphens:

• <!-- works -->
• <div [ngClass]="{'is-active': condition}"></div>

If you need more complex CSS classes, use strings. If you wish, keep your key consistent and always use the rope even if it is not necessary. This can be a reasonable style choice for your team.

Mixing class and NgClass

When it comes to maintaining the consistency of your code base (this is an obligation), choose a method and keep it consistent.

You and your team may prefer to use the style syntax [class.foo] for most use cases, and simply use NgClass when they introduce more complex scenarios. Or, you can simply use NgClass, but the rule is to choose one that is consistent and maintainable.

Property Binding with className

Before jumping to NgClass, let's explore a simple but effective sugar syntax and it is more descriptive when analyzing existing code.

So what does it look like?

In the JavaScript DOM, we provide a className attribute in the DOM element:

• const div = document.querySelector('div');
• div.className = 'hello';
• console.log(div.className); // 'hello'

Very good and easy. However, in Angular, we are using templates and links instead of using the DOM API as a querySelector.

In Angular, we link to attributes, not attributes. This means that we can translate this knowledge into:

• <div [className]="'active'"></div>

Angular will look up the JavaScript attribute of className and link our expression to it.

As a side note, take the interpolation, for example:

• <h1>{{ text }}</h1>

In fact, this is the syntax of sugar:

• <h1 [innerText]="text"></h1>

Anyway, go back to class. We may want to provide a condition for our className:

• <div [className]="condition ? 'active' : 'inactive'"></div>

Remember, we cannot do this:

• <!--  if the condition is false, we will end up with class="false" -->
• <div [className]="condition && 'active'"></div>

We want to avoid this situation and provide a course at any time unless we do not want this behavior. So what about a single course?

Property binding with “class”

Angular has an acronym syntax to provide my favorite class:

• <div [class.active]="condition"></div>

When the condition evaluation is true, the asset class will be added. When it is false, the assets are eliminated. This is really good, clean and simple.

How about more complex classes, maybe using BEM syntax (block element modifiers)?

• <div [class.is-active]="condition"></div>

This is what we need. Fortunately, we do not need to provide is-active in the chain, which is predictable when using scripts.

Now is the time for NgClass. This is a more flexible approach. When we need several classes, I will use it.

Mixing class and NgClass

When it comes to maintaining the consistency of your code base (this is an obligation), choose a method and keep it consistent.

You and your team may prefer to use the style syntax [class.foo] for most use cases, and simply use NgClass when they introduce more complex scenarios. Or, you can simply use NgClass, but the rule is to choose one that is consistent and maintainable.

Multiple Classes with NgClass

So far, we have introduced using NgClass to add and remove single classes, so let's look at a more ideal multi-class solution.

It is also worth noting that the conditions we provide will be evaluated as the value of the object's literal key. This means that we can use triplets or reject the expression:

• <div [ngClass]="{'is-active': condition, 'is-inactive': !condition, 'is-focused': condition && anotherCondition}"></div>

In NgClass, you need most of the use cases. For readability purposes, I encourage you to limit the above new line conditions to the above. It's easy to scan, read and evaluate what's happening in the code base.