Event Binding

Event Binding

Event binding lets your component react to user interactions — clicks, key presses, mouse movements, form submissions, and more.

Basic Syntax

<button (click)="onClick()">Click me</button>

// component
onClick(): void {
    console.log('Button clicked!');
}

Passing $event

<input (input)="onInput($event)">
<button (click)="onButtonClick($event)">Click</button>

// component
onInput(event: Event): void {
    const input = event.target as HTMLInputElement;
    console.log('Value:', input.value);
}

onButtonClick(event: MouseEvent): void {
    console.log('Clicked at:', event.clientX, event.clientY);
}

$event is the native DOM event object — it has all the standard properties like target, preventDefault(), etc.

Keyboard Events

<!-- Any key press -->
<input (keyup)="onKeyUp($event)">

<!-- Specific keys -->
<input (keyup.enter)="onEnter()">
<input (keyup.escape)="onEscape()">
<input (keyup.space)="onSpace()">
<input (keydown.control.s)="onSave($event)">

// component
onEnter(): void {
    console.log('Enter pressed!');
}

onSave(event: KeyboardEvent): void {
    event.preventDefault();  // Prevent browser save dialog
    this.save();
}

Template Reference Variables

Use # to create a reference to a DOM element — pass it to event handlers instead of $event:

<input #nameInput type="text" placeholder="Enter name">
<button (click)="greet(nameInput.value)">Greet</button>

// component
greet(name: string): void {
    alert(`Hello, ${name}!`);
}

The #nameInput variable gives you direct access to the <input> DOM element. nameInput.value gets the current input value.

Form Events

<form (submit)="onSubmit($event)">
    <input #emailInput type="email" placeholder="Email">
    <input #passInput type="password" placeholder="Password">
    <button type="submit">Login</button>
</form>

// component
onSubmit(event: Event): void {
    event.preventDefault();  // Prevent page reload
    // Process form data
}

Mouse Events

<div 
    (mouseenter)="onMouseEnter()"
    (mouseleave)="onMouseLeave()"
    [class.hovered]="isHovered">
    Hover me!
</div>

// component
isHovered = false;

onMouseEnter(): void {
    this.isHovered = true;
}

onMouseLeave(): void {
    this.isHovered = false;
}

Common Events Reference

Event	When It Fires
(click)	Element is clicked
(dblclick)	Element is double-clicked
(input)	Input value changes (fires on each keystroke)
(change)	Input value changes (fires on blur)
(keyup)	Key is released
(keydown)	Key is pressed down
(keyup.enter)	Enter key specifically
(submit)	Form is submitted
(focus)	Element gains focus
(blur)	Element loses focus
(mouseenter)	Mouse enters the element
(mouseleave)	Mouse leaves the element
(scroll)	Element is scrolled

Key Takeaways

• Event binding uses (event)="handler()" syntax
• $event passes the native DOM event to the handler
• Angular supports key filters like (keyup.enter)
• Template reference variables (#ref) access DOM elements directly
• Always call event.preventDefault() on form submits to prevent reload
• Event binding is one-way: template → component