Event Binding — Handling User Interactions and the $event Object

Event binding connects DOM events to component methods. Every browser event — from a click to a keyboard shortcut — can be handled with the (event)="handler($event)" syntax. The $event object provides the raw browser event data: mouse position, key pressed, input value, form state. Angular also provides event filtering shortcuts like (keydown.enter) that trigger only for specific key combinations, eliminating manual key code checks.

Event Binding Patterns #

@Component({
  selector:   'app-search-bar',
  standalone:  true,
  template: `
    <form (submit)="onSearch($event)">

      <!-- Input event — fires on every keystroke ────────────────────────── -->
      <input
        type="text"
        [value]="searchQuery"
        (input)="onInput($event)"
        (focus)="onFocus()"
        (blur)="onBlur()"
        (keydown.enter)="onSearch($event)"    <!-- only fires for Enter key ── -->
        (keydown.escape)="clearSearch()"       <!-- only fires for Escape ───── -->
        placeholder="Search posts..."
      >

      <!-- Click with event details ─────────────────────────────────────── -->
      <button type="button" (click)="onClear($event)">×</button>

      <button type="submit">Search</button>
    </form>

    <!-- Mouse events ─────────────────────────────────────────────────── -->
    <div
      (mouseover)="onHover(true)"
      (mouseleave)="onHover(false)"
      (dblclick)="onDoubleClick()"
    ></div>
  `,
})
export class SearchBarComponent {
  searchQuery = signal('');
  isFocused   = signal(false);

  onInput(event: Event): void {
    // Cast $event to the specific event type for type safety
    const input = event.target as HTMLInputElement;
    this.searchQuery.set(input.value);
  }

  onSearch(event: Event): void {
    event.preventDefault();   // prevent page reload on form submit
    if (this.searchQuery().trim())
      console.log('Searching for:', this.searchQuery());
  }

  onClear(event: MouseEvent): void {
    event.stopPropagation();   // prevent click from bubbling to parent
    this.searchQuery.set('');
  }

  onFocus(): void { this.isFocused.set(true);  }
  onBlur():  void { this.isFocused.set(false); }
  onHover(hovered: boolean): void { /* update hover state */ }
  onDoubleClick(): void { /* handle double click */ }
  clearSearch(): void { this.searchQuery.set(''); }
}

Common Mistakes #

Mistake 1 — Not preventing default on form submit (full page reload) #

❌ Wrong — (submit)="onSearch()" without event.preventDefault(); the browser submits the form and reloads the page.

✅ Correct — always call event.preventDefault() in form submit handlers in Angular SPAs.

Mistake 2 — Using $event without casting target type (TypeScript errors) #

❌ Wrong — onInput(event: InputEvent) { event.target.value }; TypeScript: Property ‘value’ does not exist on EventTarget.

✅ Correct — const input = event.target as HTMLInputElement; input.value.