Event binding with parentheses in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when clicking the button?

Consider this Angular component template snippet:

<button (click)="increment()">Click me</button>
<p>Count: {{ count }}</p>

The component class has count = 0; and increment() adds 1 to count. What will be displayed after clicking the button 3 times?

Angular

export class CounterComponent {
  count = 0;
  increment() {
    this.count++;
  }
}

A Count: 1

B Count: 0

C Count: 3

D Count: undefined

💡 Hint

Each click triggers the increment() method which increases count by 1.

The (click) event binding calls increment() on each click. Starting from 0, after 3 clicks, count becomes 3 and is displayed.

📝 Syntax

intermediate

Which option correctly binds a click event to a method with a parameter?

Given a method selectItem(id: number) in the component, which template syntax correctly passes 42 when the button is clicked?

A <button (click)="selectItem:42">Select</button>

B <button (click)="selectItem(42)">Select</button>

C <button (click)="selectItem='42'">Select</button>

D <button (click)="selectItem{42}">Select</button>

💡 Hint

Event binding calls methods like normal JavaScript functions.

Option B correctly calls selectItem(42) on click. Other options use invalid syntax.

🔧 Debug

advanced

Why does this event binding not update the count?

Look at this component snippet:

<button (click)="count = count + 1">Add</button>
<p>Count: {{ count }}</p>

And the class:

export class CounterComponent {
  count = 0;
}

Clicking the button does not update the displayed count. Why?

A Directly modifying <code>count</code> in the template does not trigger Angular change detection.

B The <code>(click)</code> event binding syntax is invalid and does not run.

C The <code>count</code> property is private and cannot be changed from the template.

D The component class lacks a method to update <code>count</code>.

💡 Hint

Angular templates should not modify component properties directly in event bindings.

Angular does not allow direct assignment in templates for change detection. The event binding should call a method that updates count.

❓ state_output

advanced

What is the value of message after clicking the button?

Given this component template:

<button (click)="updateMessage()">Update</button>
<p>{{ message }}</p>

And the class:

export class MsgComponent {
  message = 'Hello';
  updateMessage() {
    setTimeout(() => {
      this.message = 'Updated';
    }, 0);
  }
}

What will be displayed immediately after clicking the button?

A Error: Cannot read property 'message'

B Updated

C undefined

D Hello

💡 Hint

Consider when setTimeout callback runs relative to Angular change detection.

The message updates asynchronously after the current event cycle, so immediately after click it still shows 'Hello'.

🧠 Conceptual

expert

Which option best explains event binding with parentheses in Angular?

Why does Angular use parentheses (event) syntax for event binding in templates?

A Parentheses indicate binding to DOM events, allowing Angular to listen and respond to user actions.

B Parentheses are used to group multiple events together in a single binding.

C Parentheses denote two-way data binding between component and template.

D Parentheses are required to call component methods without arguments.

💡 Hint

Think about how Angular connects user actions to component logic.

Parentheses around event names tell Angular to listen for those DOM events and run the specified code when they happen.