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

Beginner

Answer

Event binding listens to and responds to user actions like clicks, key presses, and mouse movements.

Basic Event Binding:

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

Passing Event Data:

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

Component Method:

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

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