Property binding with square brackets in Angular - Step-by-Step Execution

Concept Flow - Property binding with square brackets

Template HTML with [property

↓

Angular parses template

↓

Evaluates expression inside brackets

↓

Updates DOM element property

↓

Browser renders updated property

Angular reads the template, evaluates the expression inside square brackets, and updates the DOM element's property accordingly.

Execution Sample

Angular

<button [disabled]="isDisabled">Click me</button>

// Component class
isDisabled = true;

This code binds the button's disabled property to the component's isDisabled variable, disabling the button if true.

Execution Table

Step	Template Element	Property Binding Expression	Evaluated Value	DOM Property Updated	Visual Effect
1	<button>	[disabled]="isDisabled"	true	button.disabled = true	Button is disabled (greyed out)
2	User changes isDisabled to false	N/A	false	button.disabled = false	Button becomes enabled (clickable)
3	User changes isDisabled to true	N/A	true	button.disabled = true	Button is disabled again
4	No further changes	N/A	true	No update	Button remains disabled

💡 No more changes to isDisabled, so property binding stops updating.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
isDisabled	true	false	true	true

Key Moments - 2 Insights

Why does the button become disabled or enabled automatically?

Because Angular evaluates the expression inside [disabled] and updates the button's disabled property accordingly, as shown in execution_table steps 1, 2, and 3.

Is the disabled attribute in HTML the same as the disabled property in Angular binding?

No, Angular binds to the DOM property 'disabled', not the HTML attribute. This ensures the button's enabled state updates dynamically, as seen in the DOM Property Updated column.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'isDisabled' after step 2?

A undefined

B true

C false

D null

💡 Hint

Check the variable_tracker table under 'After Step 2' for 'isDisabled'.

At which step does the button become enabled?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the Visual Effect column in the execution_table for when the button is clickable.

If the component variable 'isDisabled' never changes, what happens to the DOM property?

A It updates continuously

B It updates once and stays the same

C It never updates

D It causes an error

💡 Hint

Refer to the exit_note and last row of the execution_table.

Concept Snapshot

Property binding uses square brackets [property] in Angular templates.
It binds a DOM element's property to a component variable.
Angular updates the DOM property automatically when the variable changes.
Example: <button [disabled]="isDisabled"> disables button if true.
This is dynamic and reactive without manual DOM manipulation.

Full Transcript

Property binding with square brackets in Angular connects a DOM element's property to a component's variable. When Angular parses the template, it evaluates the expression inside the brackets and updates the DOM property accordingly. For example, binding [disabled] to a variable 'isDisabled' disables or enables a button based on that variable's value. Changes in the variable automatically update the DOM property and the visual state of the element. This dynamic binding avoids manual DOM updates and keeps the UI in sync with the component state.