ngStyle for dynamic styles in Angular - Step-by-Step Execution

Concept Flow - ngStyle for dynamic styles

Component Template

↓

ngStyle Directive Reads Object

↓

Angular Applies Styles Dynamically

↓

Element Style Updates in DOM

↓

User Sees Style Changes

Angular reads the ngStyle object in the template, applies the styles dynamically to the element, and updates the DOM so the user sees the style changes immediately.

Execution Sample

Angular

<div [ngStyle]="{color: textColor, 'font-weight': fontWeight}">Hello</div>

textColor = 'blue';
fontWeight = 'bold';

This code dynamically sets the text color and font weight of a div using ngStyle with component variables.

Execution Table

Step	Action	ngStyle Object	Applied Styles	DOM Style Update
1	Component initializes	{color: 'blue', 'font-weight': 'bold'}	none yet	none
2	Angular reads ngStyle	{color: 'blue', 'font-weight': 'bold'}	color: blue; font-weight: bold;	div style updated with color blue and font-weight bold
3	User sees styled div	{color: 'blue', 'font-weight': 'bold'}	color: blue; font-weight: bold;	Text appears blue and bold
4	Change textColor to 'red'	{color: 'red', 'font-weight': 'bold'}	color: red; font-weight: bold;	div style updates to red text, bold font
5	Change fontWeight to 'normal'	{color: 'red', 'font-weight': 'normal'}	color: red; font-weight: normal;	div style updates to red text, normal font weight
6	Remove color property	{'font-weight': 'normal'}	font-weight: normal;	div style updates to default text color, normal font weight
7	Exit	No more changes	Styles stable	DOM styles stable

💡 No more style changes, ngStyle object stable, execution ends

Variable Tracker

Variable	Start	After Step 4	After Step 5	After Step 6	Final
textColor	'blue'	'red'	'red'	undefined	undefined
fontWeight	'bold'	'bold'	'normal'	'normal'	'normal'

Key Moments - 2 Insights

Why does the style update immediately when the variable changes?

Angular detects changes in the ngStyle object and updates the DOM styles automatically, as shown in steps 4 and 5 of the execution_table.

What happens if a style property is removed from the ngStyle object?

Angular removes that style from the element, so the style reverts to default or inherited, as seen in step 6 where color is removed.

Visual Quiz - 3 Questions

Look at the execution_table, what is the applied style after step 4?

A color: blue; font-weight: bold;

B color: red; font-weight: normal;

C color: red; font-weight: bold;

D font-weight: normal;

💡 Hint

Check the 'Applied Styles' column at step 4 in the execution_table.

At which step does the font weight change to normal?

A Step 5

B Step 4

C Step 3

D Step 6

💡 Hint

Look at the 'fontWeight' variable changes in variable_tracker and the 'Applied Styles' in execution_table.

If textColor is set to undefined, what happens to the color style?

A Color changes to black automatically

B Color style is removed from the element

C Color style stays as the last value

D Angular throws an error

💡 Hint

Refer to step 6 in execution_table where color property is removed and style updates accordingly.

Concept Snapshot

ngStyle lets you set element styles dynamically using an object.
Syntax: <element [ngStyle]="{property: value}">
Angular updates styles when object values change.
Removing a property removes that style.
Use component variables for dynamic styling.
Styles update immediately in the DOM.

Full Transcript

This visual execution shows how Angular's ngStyle directive dynamically applies styles to an element. The component defines variables for styles like textColor and fontWeight. The template uses ngStyle with an object binding these variables to CSS properties. When the component initializes, Angular reads the ngStyle object and applies the styles to the element's DOM node. If the variables change, Angular detects the change and updates the styles immediately. Removing a style property from the ngStyle object removes that style from the element. This process happens step-by-step, showing how the styles update in the DOM and how the user sees the changes live.