Q1. What is ngClass directive?
ngClass is an attribute directive that dynamically adds or removes CSS classes on an element.
It can take a string, array, or object.
Example with object:
It can take a string, array, or object.
Example with object:
Q2. What is ngStyle directive?
ngStyle is an attribute directive that dynamically sets inline styles on an element using a key-value object.
Example:
Example:
Q3. What is the difference between ngClass and class binding?
Class binding [class.name]="condition" toggles a single class.
ngClass handles multiple classes more conveniently.
For multiple dynamic classes, ngClass is cleaner.
Example: [class.active]="isActive" [class.valid]="isValid" vs [ngClass]="{active: isActive, valid: isValid}"
ngClass handles multiple classes more conveniently.
For multiple dynamic classes, ngClass is cleaner.
Example: [class.active]="isActive" [class.valid]="isValid" vs [ngClass]="{active: isActive, valid: isValid}"
Q4. Can ngClass and ngStyle be used together?
Yes, you can use both directives on the same element.
They work independently.
Example:
They work independently.
Example:
Q5. How do you use ngClass with method return?
You can bind ngClass to a method that returns an object or string.
Example:
Example:
getClass() {
return { ''highlight'': this.score > 90 };
}