ngClass for dynamic classes in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is ngClass used for in Angular?

ngClass is a directive in Angular that lets you add or remove CSS classes dynamically based on component data or expressions.

intermediate

How do you apply multiple classes conditionally using ngClass?

<p>You can pass an object to <code>ngClass</code> where keys are class names and values are conditions. Classes with true conditions get applied.</p><pre><code>&lt;div [ngClass]="{ 'class1': isActive, 'class2': hasError }"&gt;&lt;/div&gt;</code></pre>

beginner

Can ngClass accept an array? How does it work?

<p>Yes. You can pass an array of class names to <code>ngClass</code>. All classes in the array will be added to the element.</p><pre><code>&lt;div [ngClass]="['class1', 'class2']"&gt;&lt;/div&gt;</code></pre>

intermediate

What happens if the condition in ngClass changes at runtime?

Angular automatically updates the classes on the element to reflect the new condition. Classes are added or removed without page reload.

beginner

Show a simple example of <code>ngClass</code> toggling a class based on a boolean variable <code>isActive</code>.

<button (click)="isActive = !isActive">Toggle</button>
<div [ngClass]="{ 'active-class': isActive }">Content</div>

Clicking the button adds or removes active-class on the div.

What type of value can ngClass NOT accept?

A String with space-separated class names

B Number representing class count

C Object with class names as keys and booleans as values

D Array of class names

ngClass accepts strings, arrays, or objects but not numbers.

How does Angular update classes when the condition in ngClass changes?

A Ignores changes after initial render

B Manually requires developer to update classes

C Reloads the whole page

D Automatically adds or removes classes based on new conditions

Angular automatically updates classes dynamically without page reload.

Which syntax correctly applies multiple classes conditionally with ngClass?

A All of the above

B [ngClass]="['class1', 'class2']"

C [ngClass]="'class1 class2'"

D [ngClass]="{ 'class1': true, 'class2': false }"

All these syntaxes are valid ways to use ngClass.

What is the benefit of using ngClass over static class attributes?

A Allows dynamic styling based on component state

B Makes HTML code longer

C Prevents CSS from loading

D Disables user interaction

ngClass helps change styles dynamically as data changes.

If you want to add a class only when a variable hasError is true, which is correct?

A [ngClass]="['error', hasError]"

B [ngClass]="{ hasError: 'error' }"

C [ngClass]="{ 'error': hasError }"

D [ngClass]="hasError ? 'error' : ''"

Object syntax with class name as key and condition as value is correct.

Explain how ngClass helps in applying CSS classes dynamically in Angular components.

Think about how classes change when variables change in your component.

Describe three different ways to use ngClass to add classes to an element.

Consider the types of values you can bind to <code>ngClass</code>.