ngClass

ngClass is a built-in directive in Angular that dynamically adds and removes CSS classes on an element based on the component state. It evaluates the expression bound to ngClass and updates the element’s class list to reflect the result. The directive supports several input formats: a string containing space-separated class names, an array of class names, or an object where each key is a class name and its boolean value determines whether that class should be applied.

Common usage patterns include:

- Object form: <div [ngClass]="{ 'active': isActive, 'hidden': isHidden }"></div>, which adds or removes class names as the corresponding conditions change.

- String form: <div [ngClass]="classNames"></div>, where classNames is a string like 'btn primary'.

- Array form: <div [ngClass]="['btn', 'highlight']"></div>, which applies all classes in the array.

ngClass is often used to reflect validation status, user interactions, or responsive states in the UI. It can be combined with static classes declared in the element’s class attribute; the bound ngClass value provides dynamic adjustments on top of any preexisting classes. While ngClass is a flexible tool for class management, Angular also offers alternative class bindings such as [class.className]="condition" for individual classes. Overall, ngClass enables concise, declarative styling tied to component logic.