What is event binding?

Event binding in Angular is a mechanism that allows you to listen for and respond to user actions or other events occurring in the DOM (Document Object Model). It enables communication from the DOM to your component, allowing your application to react dynamically to user interactions like clicks, key presses, form submissions, and more.

What is Event Binding?

Event binding lets you execute code in your component class whenever a specific event is triggered on an HTML element. This is crucial for creating interactive user interfaces that respond to user input.

The syntax for event binding involves wrapping the target event name in parentheses, for example, (event-name)="statement". The statement is typically a method call from your component class.

Syntax Example

<button (click)="onClickMe()">Click Me!</button>
<input (input)="onInput($event)" placeholder="Type something...">

In the example above, (click) is the event binding that listens for the 'click' event on the button. When clicked, it calls the onClickMe() method defined in the component. Similarly, (input) listens for the 'input' event on the text field, calling onInput() and passing the $event object.

How it Works

When an event occurs on an HTML element, Angular's event binding system intercepts it. It then executes the specified template statement, typically a method in your component's TypeScript class. This method can then update component properties, perform calculations, make API calls, or trigger other application logic.

Common Events

You can bind to almost any standard DOM event, including:

• (click): User clicks an element.
• (mouseover) / (mouseout): Mouse pointer enters/leaves an element.
• (keydown) / (keyup) / (keypress): User presses/releases/types a key.
• (submit): User submits a form.
• (change): Value of an input element changes (often after blur or enter).
• (input): Value of an input element changes immediately.
• (focus) / (blur): Element gains/loses focus.

Passing Event Data ($event Object)

Often, you need to access information about the event that occurred, such as the value of an input field, the coordinates of a mouse click, or the key pressed. Angular provides a special $event variable that represents the DOM event object. You can pass this object as an argument to your component method.

Example with $event

<input (input)="updateName($event)" placeholder="Enter your name">

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  name: string = '';

  updateName(event: Event) {
    this.name = (event.target as HTMLInputElement).value;
    console.log('Current name:', this.name);
  }
}

In this example, the updateName method receives the native Event object. We then cast event.target to HTMLInputElement to safely access its value property, which contains the current text in the input field.

Custom Events

Beyond native DOM events, Angular components can also emit and listen to custom events. This is typically done when building reusable components. A child component can declare custom events using EventEmitter and @Output() and then emit() them. A parent component can then listen to these custom events using the same event binding syntax.