ngClass for dynamic classes in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does ngClass apply classes dynamically?

Given this Angular template snippet, what classes will be applied to the

when isActive is true and hasError is false?

<div [ngClass]="{ 'active': isActive, 'error': hasError }">Content</div>

A The div will have no classes applied.

B The div will have the class 'error' only.

C The div will have the class 'active' only.

D The div will have both 'active' and 'error' classes.

💡 Hint

Remember ngClass adds classes where the condition is true.

ngClass applies classes whose conditions evaluate to true. Since isActive is true, 'active' is added. hasError is false, so 'error' is not added.

📝 Syntax

intermediate

Identify the correct ngClass syntax for multiple classes

Which option correctly applies multiple classes 'btn' and 'btn-primary' using ngClass in Angular?

A [ngClass]="{'btn': true, 'btn-primary': true}"

B [ngClass]="{'btn btn-primary': true}"

C [ngClass]="['btn', 'btn-primary']"

D [ngClass]="('btn', 'btn-primary')"

💡 Hint

ngClass accepts arrays or objects with boolean values.

Option A uses an object with each class as a key and true as value, which is valid. Option A is valid syntax and also correct. Option A treats two classes as one string key which is invalid. Option A is invalid syntax.

🔧 Debug

advanced

Why does this ngClass binding not apply the class?

Consider this Angular template:

<div [ngClass]="{ active: isActive }">Hello</div>

and component code:

isActive = '';

Why does the 'active' class not get applied?

A Because ngClass only accepts arrays, not objects.

B Because isActive is a string '', not a boolean true.

C Because the class name 'active' must be in quotes.

D Because the div element cannot have dynamic classes.

💡 Hint

Check the type of the condition value.

ngClass applies classes whose conditions evaluate to truthy values. A string '' is falsy in JavaScript, so it does not apply the class.

❓ state_output

advanced

What classes are applied after toggling state?

Given this component code:

isError = false;
toggle() { this.isError = !this.isError; }

and template:

<button (click)="toggle()">Toggle</button>
<div [ngClass]="{ 'error': isError, 'normal': !isError }">Status</div>

What classes does the div have after clicking the button twice?

A The div has class 'error'.

B The div has no classes.

C The div has both 'error' and 'normal' classes.

D The div has class 'normal'.

💡 Hint

Each click toggles isError between true and false.

Initially isError is false, so 'normal' is applied. After first click, isError is true, so 'error' applies. After second click, isError is false again, so 'normal' applies.

🧠 Conceptual

expert

How does ngClass handle null or undefined values in class bindings?

If you use ngClass with an object like { 'highlight': isHighlighted, 'disabled': isDisabled } and isHighlighted is null and isDisabled is undefined, what classes will Angular apply?

A No classes will be applied because null and undefined are treated as false.

B Both 'highlight' and 'disabled' classes will be applied.

C Only 'highlight' class will be applied because null is truthy.

D Only 'disabled' class will be applied because undefined is truthy.

💡 Hint

Think about how JavaScript treats null and undefined in boolean contexts.

In JavaScript, null and undefined are falsy values. ngClass treats falsy values as false, so neither class is applied.