Conditional class with *ngClass

Angular’s *ngClass directive allows us to apply CSS classes conditionally to an element. It provides a convenient way to dynamically toggle classes based on specific conditions. With *ngClass, we can bind a class name or an object to an element and specify the conditions under which the class should be applied. The directive evaluates the expressions and adds or removes the specified classes accordingly. This feature is particularly useful when you want to apply different styles or behavior to an element based on certain conditions, such as user interactions, data states, or dynamic variables. Overall, *ngClass simplifies the process of adding or removing classes dynamically, making it easier to create responsive and interactive Angular applications.

Syntax:

// String expression
<div [ngClass]="'class-name'"></div> 

// Array expression
<div [ngClass]="['class1', 'class2']"></div> 

 // Object expression
<div [ngClass]="{ 'class1': condition1, 'class2': condition2 }"></div>

 // Mixed expression
<div [ngClass]="['class1', { 'class2': condition }]"></div>

There are various aspects where the *ngClass is beneficial to implement. A few of them are described below:

• Boolean Properties: Define boolean properties in your component class and use them in the *ngClass expression. Set these properties to true or false based on your conditions to toggle the classes.

<div [ngClass]="{ 'active': isActive, 'highlight': isHighlighted }"></div>

• String Expressions: If you have a static class name or want to apply a class directly based on a condition, you can use a string expression directly in the *ngClass directive.

<div [ngClass]="isActive ? 'active' : 'inactive'"></div>

• Array Expressions: Use an array expression when you want to apply multiple classes conditionally. Combine static class names and class names based on conditions within the array.

<div [ngClass]="['active', isHighlighted ? 'highlight' : '']"></div>

• Object Expressions: Use an object expression when you have multiple classes and conditions. The key represents the class name, and the value represents the condition to apply that class.

<div [ngClass]="{ 'active': isActive, 'highlight': isHighlighted }"></div>

We can also use other directives like *ngIf or *ngFor along with *ngClass to conditionally apply classes based on changing states or data conditions.

In this article, we will see the basic implementation of the Conditional class with *ngClass in Angular, along with understanding their implementation with the help of examples.