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
- 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