In Angular, event binding allows you to listen for and respond to user actions like clicks, keystrokes, mouse movements, etc. Event binding is done using parentheses `()` in the template. This enables you to associate DOM events with methods in your component class.
### 1. Example: Click// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
method() {
alert('Event clicked.');
}
myEvent(a: string) {
alert(a);
}<!-- app.component.html -->
<button (click)="method()">Click me</button>
<button (click)="myEvent('Shoyeb')">Click me</button>2. Example: $event
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
method(event: any) {
console.log(event); // we can see mouse position and all information
}
}<!-- app.component.html -->
<button (click)="method($event)">Click me</button>Beside this we can use ,
<button (dblclick)="method()">Click me</button>
<button (mouseover)="method()">Click me</button>
`<button (mouseout)=“method()“>Click me</button
although keypress and keyup