[Solved] Why does this code cause an error?color = 'blue';<div [ngStyle]="{color}">Text</div> — Ans: Missing quotes around the key 'color' in the object | Angular

Angular - Directives

Why does this code cause an error?

color = 'blue';
<div [ngStyle]="{color}">Text</div>

AThe variable 'color' is not defined in the component

BObject shorthand syntax is invalid in Angular templates

CAngular requires string keys in ngStyle object

DMissing quotes around the key 'color' in the object

Step-by-Step Solution

Solution:

Step 1: Understand object syntax in Angular templates
Angular requires keys in the ngStyle object to be strings, so keys must be quoted.
Step 2: Analyze the provided code
The key color is unquoted, causing a syntax error.
Final Answer:
Missing quotes around the key 'color' in the object -> Option D
Quick Check:
Keys in ngStyle object must be quoted strings [OK]

Quick Trick: Always quote keys in ngStyle style object [OK]

Common Mistakes:

Master "Directives" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Why does this code cause an error?