ngStyle for dynamic styles in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What style will be applied by ngStyle?

Given the Angular component template below, what will be the background color of the <div> when isActive is true?

Angular

<div [ngStyle]="{'background-color': isActive ? 'green' : 'red'}">Status Box</div>

A The background color will be green.

B The background color will be red.

C The background color will be blue.

D No background color will be applied.

💡 Hint

Check the ternary condition inside ngStyle for the background-color property.

The ngStyle directive applies styles dynamically. Since isActive is true, the ternary expression sets the background color to green.

📝 Syntax

intermediate

Identify the correct ngStyle syntax

Which of the following is the correct syntax to apply multiple dynamic styles using ngStyle in Angular?

A <div ngStyle="color: textColor; font-size: fontSize + 'px'"></div>

B <div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}"></div>

C <div [ngStyle]="color: textColor; font-size: fontSize + 'px'"></div>

D <div [ngStyle]="{color: 'textColor', fontSize: fontSize + 'px'}"></div>

💡 Hint

Remember that ngStyle expects an object with style properties as keys and values as expressions.

Option B correctly uses property binding with an object literal. The keys are strings for CSS properties, and the values are expressions. Other options have syntax errors or incorrect binding.

🔧 Debug

advanced

Why does ngStyle not update dynamically?

Consider this Angular component snippet:

styles = { 'color': 'blue' };

updateColor() {
  this.styles.color = 'red';
}

And the template:

<div [ngStyle]="styles">Text</div>

Why might the color not change to red after calling updateColor()?

A Because the <code>updateColor</code> method is missing a return statement.

B Because ngStyle only accepts string literals, not object variables.

C Because Angular does not detect changes when object properties are mutated directly.

D Because the styles object must be reassigned to a new object for change detection.

💡 Hint

Think about how Angular detects changes in objects passed to bindings.

Angular's change detection checks object references. Mutating a property does not change the reference, so Angular may not detect the update. To fix, assign a new object.

❓ state_output

advanced

What styles are applied after state change?

Given this Angular component code:

isHighlighted = false;

getStyle() {
  return {
    'font-weight': this.isHighlighted ? 'bold' : 'normal',
    'color': this.isHighlighted ? 'orange' : 'black'
  };
}

And template:

<button (click)="isHighlighted = !isHighlighted">Toggle</button>
<span [ngStyle]="getStyle()">Text</span>

What will be the style of the <span> after clicking the button once?

A font-weight: normal; color: black;

B font-weight: normal; color: orange;

C font-weight: bold; color: black;

D font-weight: bold; color: orange;

💡 Hint

The button toggles the boolean, changing styles accordingly.

Initially, isHighlighted is false, so styles are normal and black. After one click, it becomes true, so styles become bold and orange.

🧠 Conceptual

expert

Why prefer ngStyle over inline style bindings?

In Angular, why is it generally better to use ngStyle for dynamic styling instead of directly binding to the style attribute like [style.color] or inline styles?

A Because ngStyle allows setting multiple styles at once with a single binding, improving readability and performance.

B Because [style.color] bindings are deprecated and no longer supported in Angular 17+.

C Because ngStyle prevents any style changes unless explicitly triggered by user events.

D Because ngStyle automatically adds vendor prefixes to CSS properties.

💡 Hint

Think about managing multiple styles and code clarity.

ngStyle lets you apply many styles in one object, making templates cleaner and reducing multiple bindings. Other options are incorrect or false.