What is ngClass in Angular? How to use ngClass in Angular?

 ngClass is a built-in directive in Angular that allows you to conditionally add or remove CSS classes to and from an HTML element based on the truthiness of certain expressions. It provides a convenient way to apply styling to an element based on dynamic conditions.

Here's an example of how to use ngClass in an Angular component template:

html
<div [ngClass]="{'highlight': isHighlighted, 'active': isActive}">
  This is a sample element.
</div>

In this example, we have a div element with two CSS classes: highlight and active. We're using ngClass to dynamically apply or remove these classes based on two expressions: isHighlighted and isActive.

If isHighlighted is truthy, then the highlight class will be applied to the div element. If isActive is truthy, then the active class will be applied to the div element. If both expressions are falsy, then neither class will be applied to the div element.

You can also use ngClass with more complex expressions. For example:

html
<div [ngClass]="{'red': isRed, 'blue': isBlue && !isGreen, 'green': isGreen}">
  This is another sample element.
</div>

In this example, we're using three expressions to determine which classes to apply to the div element:

• If isRed is truthy, then the red class will be applied.
• If isBlue is truthy and isGreen is falsy, then the blue class will be applied.
• If isGreen is truthy, then the green class will be applied.

ngClass can also accept an array of expressions, which can be useful for applying multiple classes based on different conditions.

Overall, ngClass provides a powerful way to conditionally apply CSS classes in an Angular application, making it easy to create dynamic, responsive UIs.