What is an ngClass directive in Angular

The "ngClass" directive in Angular is used to dynamically add or remove CSS classes to an HTML element based on conditions. It provides a flexible way to manipulate an element's class based on conditional expressions in the Angular component.

Basic Syntax

The "ngClass" directive basic syntax involves evaluating an expression that results in an object or a string of classes. This expression can be a function or an object literal.

Usage with Literal Object

<!-- Usage with an object literal -->
<div [ngClass]="{'classe1': condition1, 'classe2': condition2, 'classe3': condition3}">Content</div>

Use with Function

<!-- Use with a function -->
<div [ngClass]="getClasses()">Content</div>

In the example above, "condition1", "condition2", etc., are expressions that result in Boolean values. If the condition is "true", the corresponding class will be added to the element.

Practical example

Consider an Angular component with a "highlight" property that indicates whether an element should be highlighted with a specific color. The "ngClass" directive can be used as follows:

// TypeScript component
import { Component } from '@angular/core';

@Component({
   selector: 'app-example-ngclass',
   template: `
     <div [ngClass]="{'highlighted': highlighted}">
       This is an element with ngClass.
     </div>
   `,
   styles: [
     '.highlighted { background-color: yellow; }'
   ]
})
export class ExampleNgClassComponent {
   highlight = true;
}

In this example, the "highlighted" CSS class will be applied to the "<div>" element if the "highlighted" property is "true".

Use with Array

In addition to use with a literal object, "ngClass" can also be used with an array of classes:

<div [ngClass]="['class1', 'class2', 'class3']">Content</div>

In this case, the array classes will be added to the element regardless of conditions.

The "ngClass" directive is especially useful when you need to dynamically change the classes of an element based on specific logic or conditions in the Angular component. This provides a flexible way to dynamically style elements in response to changes in application state.