[Solved] Given the component variables:textColor = 'purple';isItalic = true;What styles will be applied by this template?<div [ngStyle]="{'color': textColor, 'font-style': isItalic ? | Angular

Angular - Directives

Given the component variables:

textColor = 'purple';
isItalic = true;

What styles will be applied by this template?

<div [ngStyle]="{'color': textColor, 'font-style': isItalic ? 'italic' : 'normal'}">Sample</div>

AText color purple and font style normal

BText color purple and font style italic

CText color default and font style italic

DText color default and font style normal

Step-by-Step Solution

Solution:

Step 1: Evaluate color
The variable textColor is 'purple', so color will be purple.
Step 2: Evaluate font-style
isItalic is true, so font-style will be 'italic'.
Final Answer:
Text color purple and font style italic -> Option B
Quick Check:
Conditional operator sets font-style correctly. [OK]

Quick Trick: Ternary sets style based on boolean [OK]

Common Mistakes:

Master "Directives" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given the component variables: