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.

Practice

1. What does property binding with square brackets [] do in Angular?

easy

A. It creates a two-way data binding between component and template.

B. It binds a component property to an element property, updating the UI automatically.

C. It binds an event handler to an element event.

D. It defines a CSS class for an element.

Solution

1. Step 1: Understand property binding purpose

   Property binding connects component data to element properties, so UI updates when data changes.

2. Step 2: Differentiate from other bindings

   Event binding uses parentheses, two-way binding uses both brackets and parentheses, CSS class binding uses special syntax.

3. Final Answer:

   It binds a component property to an element property, updating the UI automatically. -> Option B

4. Quick Check:

   Property binding = UI updates from component data [OK]

Hint: Square brackets mean binding to element property [OK]

Common Mistakes:

• Confusing property binding with event binding
• Thinking it creates two-way binding
• Using it to bind CSS classes incorrectly

2. Which of the following is the correct syntax for binding the src property of an <img> tag to a component variable imageUrl?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify property binding syntax

   Property binding uses square brackets around the property name, like [src].

2. Step 2: Check correct attribute usage

   Inside quotes, use the component variable name without extra brackets or parentheses.

3. Final Answer:

   <img [src]="imageUrl"> -> Option C

4. Quick Check:

   Square brackets + variable name = correct property binding [OK]

Hint: Use [property]="variable" for property binding [OK]

Common Mistakes:

• Using interpolation {{}} inside src attribute for property binding
• Using parentheses () which are for event binding
• Putting brackets inside quotes incorrectly

3. Given this component code:

export function MyComponent() {
  const [isDisabled, setIsDisabled] = React.useState(true);
  return <button [disabled]="isDisabled">Click me</button>;
}

What will happen when this Angular template renders?

medium

A. There will be a syntax error because React code is used in Angular.

B. The button will be enabled because isDisabled is true.

C. The button will be disabled because isDisabled is true.

D. The button will ignore the disabled property and be enabled.

Solution

1. Step 1: Identify framework mismatch

   The code uses React hooks inside Angular template, which is invalid syntax in Angular.

2. Step 2: Understand Angular template rules

   Angular templates do not support React code or hooks; this causes a syntax error.

3. Final Answer:

   There will be a syntax error because React code is used in Angular. -> Option A

4. Quick Check:

   React code in Angular template = syntax error [OK]

Hint: Angular templates don't accept React code [OK]

Common Mistakes:

• Assuming React state works in Angular
• Thinking disabled attribute ignores wrong syntax
• Confusing framework syntax rules

4. What is wrong with this Angular template snippet?

<input [value]=username>

medium

A. The variable username must be a string literal.

B. Square brackets cannot be used on input elements.

C. The property name should be in parentheses, not brackets.

D. The value should be in quotes: [value]="username".

Solution

1. Step 1: Check property binding syntax

   Property binding requires the value inside quotes to be a valid expression.

2. Step 2: Identify missing quotes

   Here, username is not quoted, so Angular treats it as invalid syntax.

3. Final Answer:

   The value should be in quotes: [value]="username". -> Option D

4. Quick Check:

   Property binding expression must be quoted [OK]

Hint: Always quote expressions inside square brackets [OK]

Common Mistakes:

• Omitting quotes around binding expressions
• Using parentheses instead of brackets for property binding
• Thinking brackets can't be used on input

5. You want to disable a button dynamically based on a component boolean variable isLoading. Which Angular template code correctly disables the button when isLoading is true and enables it otherwise?

hard

A. <button [disabled]="isLoading">Submit</button>

B. <button disabled="isLoading">Submit</button>

C. <button [disabled]="!isLoading">Submit</button>

D. <button (disabled)="isLoading">Submit</button>

Solution

1. Step 1: Understand property binding for boolean attributes

   Use square brackets to bind the disabled property to the component variable.

2. Step 2: Check logic for disabling

   When isLoading is true, disabled should be true to disable the button.

3. Step 3: Evaluate options

   <button [disabled]="isLoading">Submit</button> binds disabled to isLoading correctly. <button disabled="isLoading">Submit</button> treats isLoading as string, not variable. <button [disabled]="!isLoading">Submit</button> disables when isLoading is false (wrong logic). <button (disabled)="isLoading">Submit</button> uses parentheses which is event binding, invalid here.

4. Final Answer:

   <button [disabled]="isLoading">Submit</button> -> Option A

5. Quick Check:

   Bind [disabled] to boolean variable directly [OK]

Hint: Bind [disabled] to boolean variable for dynamic enable/disable [OK]

Common Mistakes:

• Using disabled="isLoading" treats it as string
• Negating isLoading incorrectly disables button
• Using parentheses () instead of brackets []