Event Binding

Parentheses syntax binds a DOM event (or component output) to a handler in your component class.

4 min read Level 1/5 #angular#templates#events

What you'll learn

Bind to native events like click and input
Receive the event object with $event
Bind to custom outputs from child components

Property binding pushes data into the DOM. Event binding pulls events back out. Wrap the event name in parentheses and assign an expression that runs when the event fires.

Native Events

<button (click)="onSave()">Save</button>
<input (input)="onType($event)" />
<form (submit)="onSubmit($event)">...</form>

Any DOM event works: click, input, keyup, mouseenter, focus, submit. The right-hand side is a statement, not an expression — so assignments and method calls are both fine.

Accessing the Event Object

The magic variable $event is the native event:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-search',
  standalone: true,
  template: `
    <input (input)="onType($event)" />
    <p>Query: {{ query() }}</p>
  `,
})
export class SearchComponent {
  query = signal('');

  onType(e: Event) {
    const target = e.target as HTMLInputElement;
    this.query.set(target.value);
  }
}

Key Modifiers

For keyboard handlers Angular has a handy modifier syntax:

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

Custom Events from Children

When a child component declares an output, parents listen with the same parentheses syntax:

<app-todo-form (submitted)="addTodo($event)" />

$event here is whatever value the child emitted, fully typed by the child’s output<T>() declaration.

Two-Way Binding →