What Is Event Binding in Angular ?

Event Binding

Event binding is a way for your Angular app to react to user interactions like clicking a button, changing a dropdown, moving the mouse, or typing on the keyboard.
With event binding, you decide what should happen when the user does something. This makes your app dynamic and interactive.

Example: Handling User Events in Angular

app.component.ts (TypeScript logic)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Quipoin!!';
  days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

  changemonths(event) {
    console.log("Days changed from the dropdown!");
    console.log(event);
  }

  myClickFunction(event) {
    alert("Button is clicked!");
    console.log(event);
  }
}

app.component.html (HTML template)

<div style="text-align: center;">
    <h1>Welcome to {{title}}</h1>
</div>

<div>Days:
    <select (change)="changemonths($event)">
        <option *ngFor="let i of days">{{i}}</option>
    </select>
</div>

<button (click)="myClickFunction($event)">Click Me</button>

How This Works

(click)="myClickFunction($event)"

When the user clicks the button, it calls the myClickFunction method and passes the event object.

(change)="changemonths($event)"

When the user selects a different day from the dropdown, it calls changemonths and passes the event object.

What Happens in the Output

Clicking the button shows an alert: "Button is clicked!"

Changing the selected day logs: "Days changed from the dropdown!" and shows details about the event in the console.

This shows how Angular can respond to real-time user actions.