How to Add Conditional Classes in Angular Using ngClass

Introduction

Angular provides a lot of powerful directives that make it easy to manipulate HTML elements based on various conditions. One such directive is ngClass, which allows you to add or remove CSS classes from an HTML element based on certain conditions.

In this tutorial, we’ll learn how to use ngClass in Angular to add conditional classes to HTML elements.

The ngClass Directive

The ngClass directive is used to add or remove CSS classes from an HTML element based on certain conditions. The directive accepts an object or an array of objects that define the class names and conditions for adding them.

Here’s the basic syntax for using ngClass:

<div [ngClass]="{'class-name': expression}">...</div>

In the above syntax, class-name is the name of the CSS class that you want to add, and expression is a Boolean expression that evaluates to true or false.

When the expression is true, the class-name class will be added to the HTML element. When the expression is false, the class will be removed.

Adding a Single Conditional Class

Let’s start with a simple example of adding a single conditional class to an HTML element.

Suppose we have a Boolean variable named isActive in our component, which determines whether a <div> element should have the active CSS class or not.

Here’s how we can use ngClass to add the active class based on the value of isActive:

<div [ngClass]="{'active': isActive}">...</div>

In the above example, we’ve used the ngClass directive to bind a class name and a Boolean expression to the <div> element. When the value of isActive is true, the active class will be added to the <div> element. Otherwise, the class will be removed.

Adding Multiple Conditional Classes

Sometimes, you may need to add multiple conditional classes to an HTML element based on different conditions.

For example, suppose you have the following conditions:

• If isSuccess is true, add the success class.
• If isWarning is true, add the warning class.
• If isError is true, add the error class.

Here’s how you can use ngClass to add these classes based on the conditions:

<div [ngClass]="[
  {'success': isSuccess},
  {'warning': isWarning},
  {'error': isError}
]">...</div>

In the above example, we’ve used an array of objects to bind multiple class names and Boolean expressions to the <div> element. When a condition is true, the corresponding class will be added to the <div> element. Otherwise, the class will be removed.

Complex Conditions

Sometimes, you may need to add more complex conditions to determine which classes should be added or removed from an HTML element.

For example, suppose you have the following conditions:

• If isSuccess is true, add the success class.
• If isWarning is true, add the warning class.
• If isError is true and isCritical is false, add the error class.
• If isSpecial is true, add either the special-1 or special-2 class based on the value of specialType.

Here’s how you can use ngClass to add these classes based on the conditions:

<div [ngClass]="{
  'success': isSuccess,
'warning': isWarning,
'error': isError && !isCritical,
'special-1': isSpecial && specialType === 'type-1',
'special-2': isSpecial && specialType === 'type-2'
}">...</div>

In the above example, we’ve used an object to bind multiple class names and complex Boolean expressions to the `<div>` element. When a condition is true, the corresponding class will be added to the `<div>` element. Otherwise, the class will be removed.

Note that we’ve used the `&&` (logical AND) and `!` (logical NOT) operators to create more complex Boolean expressions that combine multiple conditions.

You can also use ternary operators to create more complex conditions:

<div [ngClass]="{
  'class-1': condition1,
  'class-2': condition2,
  'class-3': condition3 && !condition4,
  'class-4': condition5 ? true : false
}">
  This element will have one or more classes based on the conditions.
</div>

Conclusion

In this tutorial, we’ve learned how to use the `ngClass` directive in Angular to add conditional classes to HTML elements. We’ve seen how to add a single conditional class, multiple conditional classes, and complex conditions based on various Boolean expressions. By using `ngClass`, you can make your Angular applications more dynamic and responsive by adding or removing CSS classes based on different conditions.