Property binding with square brackets in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the rendered output of this Angular component?

Consider this Angular component template:

<input [value]="userName" />
<p>Hello, {{ userName }}!</p>

And the component class:

export class AppComponent {
  userName = 'Alice';
}

What will the user see in the input box and the paragraph when the page loads?

Angular

export class AppComponent {
  userName = 'Alice';
}

A Input box is empty and paragraph shows 'Hello, Alice!'

B Input box shows 'userName' and paragraph shows 'Hello, userName!'

C Input box shows 'Alice' and paragraph shows 'Hello, Alice!'

D Input box shows 'Alice' and paragraph is empty

💡 Hint

Remember that property binding with square brackets sets the property value of the element.

The [value] binding sets the input's value property to the userName string 'Alice'. The interpolation inside the paragraph also shows 'Alice'.

📝 Syntax

intermediate

Which option correctly binds the disabled property of a button in Angular?

You want to disable a button based on a boolean variable isDisabled in your component. Which of the following is the correct syntax?

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

B <button (disabled)="isDisabled">Click</button>

C <button disabled={{ isDisabled }}>Click</button>

D <button disabled: isDisabled>Click</button>

💡 Hint

Property binding uses square brackets around the property name.

Option A uses property binding syntax [disabled] to bind the boolean isDisabled to the button's disabled property.

🔧 Debug

advanced

Why does this Angular property binding not update the input value?

Given this template:

<input [value]="userInput" />

And this component code:

export class AppComponent {
  userInput = '';

  ngOnInit() {
    setTimeout(() => {
      this.userInput = 'Hello';
    }, 1000);
  }
}

Why does the input box remain empty after 1 second?

A Because property binding only sets the initial value and does not update after changes.

B Because the component does not use two-way binding with [(ngModel)].

C Because the change detection is not triggered by setTimeout.

D Because the input element does not support property binding for value.

💡 Hint

Think about how Angular updates input elements when the model changes.

Property binding sets the input's value property initially, but user changes or later updates require two-way binding with [(ngModel)] to keep input and model in sync.

🧠 Conceptual

advanced

What is the difference between attribute binding and property binding in Angular?

Consider these two bindings:

<button [attr.aria-label]="label">OK</button>
<button [disabled]="isDisabled">OK</button>

What is the key difference between [attr.aria-label] and [disabled] bindings?

A <code>[attr.aria-label]</code> sets an HTML attribute, while <code>[disabled]</code> sets a DOM property.

B <code>[attr.aria-label]</code> sets a DOM property, while <code>[disabled]</code> sets an HTML attribute.

C Both set HTML attributes but differ in syntax.

D Both set DOM properties but differ in syntax.

💡 Hint

Attributes and properties are different in HTML elements.

Angular's [attr.xxx] syntax sets HTML attributes directly, useful for non-standard attributes. The plain [property] syntax sets DOM properties, which affect element behavior.

❓ state_output

expert

What is the final value of the button's disabled property after this sequence?

Given this Angular component template:

<button [disabled]="isDisabled" (click)="toggle()">Toggle</button>

And this component code:

export class AppComponent {
  isDisabled = false;

  toggle() {
    this.isDisabled = !this.isDisabled;
    setTimeout(() => {
      this.isDisabled = !this.isDisabled;
    }, 1000);
  }
}

If the user clicks the button once, what will be the disabled state of the button immediately and after 1 second?

A Immediately disabled=false; after 1 second disabled=false

B Immediately disabled=false; after 1 second disabled=true

C Immediately disabled=true; after 1 second disabled=true

D Immediately disabled=true; after 1 second disabled=false

💡 Hint

Trace the toggle function and the delayed setTimeout reversal.

Click toggles isDisabled from false to true immediately, disabling the button. After 1 second, isDisabled toggles back to false, enabling the button again.

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 []