ngStyle for dynamic styles in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is ngStyle used for in Angular?

ngStyle is a directive that lets you set CSS styles dynamically on an HTML element based on component data.

beginner

How do you bind multiple styles using ngStyle?

You pass an object where keys are CSS property names and values are style values, like {'color': 'red', 'font-weight': 'bold'}.

beginner

Can ngStyle update styles reactively when component data changes?

Yes, ngStyle updates the styles automatically whenever the bound data changes, reflecting the new styles instantly.

beginner

Show an example of using ngStyle to change text color based on a component property isError.

<div [ngStyle]="{'color': isError ? 'red' : 'green'}">Status message</div>

intermediate

What is the difference between ngStyle and inline style binding like [style.color]?

ngStyle can set multiple styles at once using an object, while [style.color] binds only one style property.

What type of value does ngStyle expect for binding?

A An object with CSS property names and values

B A string with CSS styles

C A boolean value

D An array of style names

ngStyle expects an object where keys are CSS properties and values are style values.

How does ngStyle react when the bound data changes?

A It does not change styles

B It requires manual refresh

C It updates the styles automatically

D It throws an error

ngStyle updates styles reactively when the data changes.

Which syntax correctly applies ngStyle to set background color to blue?

A [style.backgroundColor]="'blue'"

B [ngStyle]="'background-color: blue'"

C style="background-color: blue"

D [ngStyle]="{'background-color': 'blue'}"

The correct syntax uses an object with CSS property names as keys.

Which is a benefit of using ngStyle over inline styles?

A Always faster rendering

B Allows dynamic style changes based on component data

C Works only with static styles

D Requires no Angular knowledge

ngStyle allows styles to change dynamically with data.

If you want to set multiple styles conditionally, which Angular directive is best?

A ngStyle

B ngClass

C ngIf

D ngFor

ngStyle is designed for multiple dynamic styles.

Explain how ngStyle helps in applying dynamic styles in Angular components.

Think about how styles can change when data changes.

Describe the difference between using ngStyle and binding individual style properties like [style.color].

Consider how many styles you want to change at once.