Event Binding

Interpolation and property binding move data from the class into the template. Event binding goes the other direction: it calls a method on the class when something happens in the template — a click, a keypress, a form submission.

The (event) syntax

Parentheses bind a DOM event to a component method:

<button (click)="addToWatchlist()">Add</button>

When the user clicks the button, Angular calls addToWatchlist() on the component class. The method runs and can update class properties — which Angular then reflects back in the template.

Common DOM events:

<button (click)="handleClick()">Click</button>
<input (input)="handleInput($event)" />
<input (keydown.enter)="handleEnter()" />
<form (submit)="handleSubmit($event)">...</form>
<div (mouseover)="handleHover()">Hover me</div>

The $event object

The special $event variable in the template refers to the native DOM event object. Pass it to your method when you need information about the event:

nav-bar.ts

onSearchInput(event: Event): void {
  const value = (event.target as HTMLInputElement).value;
  this.searchTerm = value;
}

<input (input)="onSearchInput($event)" placeholder="Search..." />

For click events, you typically do not need $event — the click itself is the signal. For input events, you need $event to read the typed value.

Event binding in CinemaVault

MovieCard uses event binding for the watchlist toggle button:

movie-card.html

<div class="card" [class.saved]="isInWatchlist">
  <img [src]="posterUrl" [alt]="movie.title" />
  <h3>{{ movie.title }}</h3>
  <button class="watchlist-btn" (click)="toggle()">
    {{ isInWatchlist ? '✓ Saved' : '+ Save' }}
  </button>
</div>

movie-card.ts

toggle(): void {
  this.watchlistService.toggle(this.movie);
}

The (click)="toggle()" binding connects the button click to the toggle() method. The method calls the service, which updates its internal state, which Angular detects and uses to re-render the button label and class.

Keyboard event filtering

Angular provides a convenient syntax for filtering keyboard events by key:

<input (keydown.enter)="submit()" />
<input (keydown.escape)="cancel()" />

These only fire when the specified key is pressed, saving you from writing if (event.key === 'Enter') in your handler.

Stopping propagation and preventing defaults

Access the event object and call standard DOM methods:

<button (click)="handleClick($event)">Click</button>

handleClick(event: MouseEvent): void {
  event.stopPropagation();
  // handle the click
}

For form submissions, always prevent the default to stop browser navigation:

<form (submit)="onSubmit($event)">
  <button type="submit">Search</button>
</form>

onSubmit(event: Event): void {
  event.preventDefault();
  this.search(this.query);
}

Exercise

1. Add a count = 0 property to a practice component.
2. Add two buttons with (click) bindings — one increments count, one decrements it (minimum 0).
3. Display count with interpolation.
4. Add an <input> with (input)="updateQuery($event)" that stores the input value in a query property.
5. Add (keydown.enter)="submit()" to submit the query — for now, just console.log(this.query).

Recap

• (event)="method()" binds a DOM event to a component method.
• $event in the template refers to the native DOM event object — pass it when you need event details.
• (keydown.enter) and similar filter keyboard events by key, avoiding manual key checks.
• Call event.preventDefault() in form submit handlers to stop browser navigation.