What is event binding and how do you pass data with events?

Event binding runs a component method when the user acts on an element, such as a click, a key press or a mouse movement. You write the event name in parentheses and the statement to run in quotes.

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

To pass data, give the method $event, which holds the DOM event object. The handler can then read details such as the input's current value. You can also pass any template value, such as (click)="select(item)".

<input (keyup)="onKeyUp($event)">
<button (click)="onClick($event)">Click</button>

onKeyUp(event: any): void {
  console.log(event.target.value);
}

onClick(event: Event): void {
  console.log('Button clicked');
}