Event Binding

Event binding in Angular lets your components respond to user actions and browser events, using the (event) syntax.

Example

Here is a component that collects recipes by drag-and-dropping them:

@Component({
  selector: 'mc-recipe-collector',
  template: `
    <h1>Drag and drop your recipes below</h1>
    <div
      aria-label="Recipe drop zone"
      role="region"
      (drop)="logRecipe($event)"
    >
      <p>Drop your recipes here</p>
    </div>
  `,
})
class RecipeCollector {
  logRecipe(event: Event) {
    console.log(event.dataTransfer?.files);
  }
}

Here, (drop)="logRecipe($event)" is an event binding. When the user drops a recipe file, Angular calls the logRecipe() method on your component. You can bind to any standard DOM event (like click, input, keyup).

Example​

🔔 Want me to notify you when I drop new recipes?

Example