You want to apply the class 'highlight' only when score is above 80 and 'low-score' when it is below or equal to 80. Which ngClass binding correctly implements this logic?

hard📝 Application Q15 of 15

Angular - Directives

You want to apply the class 'highlight' only when score is above 80 and 'low-score' when it is below or equal to 80. Which ngClass binding correctly implements this logic?

A<code><div [ngClass]="{highlight: score > 80, 'low-score': score <= 80}"></div></code>

B<code><div ngClass="score > 80 ? 'highlight' : 'low-score'"></div></code>

C<code><div [ngClass]="['highlight', 'low-score']"></div></code>

D<code><div [ngClass]="{highlight: score <= 80, 'low-score': score > 80}"></div></code>

Step-by-Step Solution

Solution:

Step 1: Analyze the condition for each class
'highlight' applies if score > 80, 'low-score' applies if score <= 80.
Step 2: Check each option's logic
<div [ngClass]="{highlight: score > 80, 'low-score': score <= 80}"></div> correctly maps conditions to classes in an object. <div ngClass="score > 80 ? 'highlight' : 'low-score'"></div> lacks property binding [ngClass], so the ternary is not evaluated (static string). <div [ngClass]="['highlight', 'low-score']"></div> applies both classes always. <div [ngClass]="{highlight: score <= 80, 'low-score': score > 80}"></div> reverses conditions incorrectly.
Final Answer:
<div [ngClass]="{highlight: score > 80, 'low-score': score <= 80}"></div> -> Option A
Quick Check:
Object with correct conditions = C [OK]

Quick Trick: Use object syntax with conditions for multiple exclusive classes [OK]

Common Mistakes:

Applying both classes always with array syntax
Reversing condition logic
Forgetting property binding [ngClass] for dynamic expressions

Master "Directives" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions

More Angular Quizzes

You want to apply the class 'highlight' only when score is above 80 and 'low-score' when it is below or equal to 80. Which ngClass binding correctly implements this logic?

Step 1: Analyze the condition for each class

Step 2: Check each option's logic

Final Answer:

Quick Check:

Want More Practice?