Angular Event Binding

What is Event Binding in Angular?

Event binding runs a component method when a DOM event fires, using parentheses: (event)="handler()". The DOM event object is available in the template as the special variable $event.

Event Binding example

<button (click)="apply(job.id)">Apply now</button>
<input (input)="onSearch($event)" placeholder="Search">
<form (submit)="save()">…</form>
<input (keyup.enter)="search()">   <!-- key modifier -->

Typing $event in the component

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

event.target is typed as EventTarget, so a cast is needed before reading value. Passing $event.target.value directly from the template avoids the cast but loses type checking.

Key points to remember

• Key modifiers such as (keyup.enter) and (keydown.escape) remove manual key-code checks.
• Return false or call $event.preventDefault() to stop default behaviour.
• Every event handler triggers a change detection cycle.

Common mistakes with Event Binding

• Writing (click)="apply()" with the wrong method name — the template fails silently in some builds.
• Binding a heavy handler to (mousemove) or (scroll) without throttling.