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.