What is Event Binding in Angular?

What is Event Binding?

Event binding is a type of one-way data binding in Angular used to send information about an event from the template (HTML) to the component (TypeScript).

It allows the component to respond to user actions such as:

• Button click
• Key press
• Input change
• Mouse movement
• Form submission
• Focus or blur

Event binding uses parentheses ( ):

(event)="method()"

Example:

<button (click)="save()">Save</button>

When the user clicks the button, Angular calls the save() method in the component.

The direction is:

View (HTML)
     ↓
Component (TypeScript)

Event Binding = View → Component communication

Why Do We Need Event Binding?

Web applications need to respond to user actions.

For example, when a user:

• Clicks Save
• Clicks Delete
• Types into a textbox
• Selects an option
• Submits a form
• Presses Enter

the Angular component needs to know that the event occurred and execute the appropriate logic.

Without event binding, we would have to manually attach JavaScript event handlers.

Angular provides a clean declarative approach:

<button (click)="save()">Save</button>

Purpose

The main purpose of event binding is to listen for events in the template and execute component logic when those events occur.

Common events include:

Example:

<button (click)="save()">Save</button>

save() {
  console.log('Data saved');
}

Simple Example

TypeScript

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

@Component({
  selector: 'app-user',
  standalone: true,
  templateUrl: './user.html'
})
export class User {

  message = '';

  save() {
    this.message = 'User saved successfully';
  }
}

HTML

<button (click)="save()">Save</button>

<p>{{ message }}</p>

When the user clicks Save:

User clicks Save
       ↓
(click) event occurs
       ↓
Angular calls save()
       ↓
message is updated
       ↓
UI displays the message

How Event Binding Works

Consider:

<button (click)="save()">Save</button>

Angular listens for the click event.

When the event occurs:

HTML Button
    │
    │ User clicks
    ↓
(click)
    │
    ↓
Event Binding
    │
    ↓
Component
    │
    ↓
save()

Therefore:

Event Binding
View → Component

Using $event

Sometimes we need information about the event itself.

Angular provides the special:

$event

Example:

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

Component:

showEvent(event: MouseEvent) {
  console.log(event);
}

$event contains information about the event that occurred.

For a mouse event, it can contain information such as:

• Target element
• Mouse position
• Button pressed

Example with Input Event

Event binding can also capture user input.

<input (input)="onInput($event)">

Component:

onInput(event: Event) {
  const input = event.target as HTMLInputElement;

  console.log(input.value);
}

Flow:

User types
    ↓
(input)
    ↓
$event
    ↓
onInput($event)
    ↓
Component receives the value

Keyboard Event Binding

Angular can listen to keyboard events.

<input (keyup)="onKeyUp()">

You can also listen for a specific key:

<input (keyup.enter)="search()">

Now search() executes only when the user presses Enter.

Example:

search() {
  console.log('Searching...');
}

Event Binding with Arguments

You can pass values directly to the method.

<button (click)="deleteProduct(10)">
  Delete
</button>

Component:

deleteProduct(id: number) {
  console.log('Deleting product:', id);
}

You can also combine your own argument with $event:

<button (click)="selectProduct(10, $event)">
  Select
</button>

Event Binding with Child Components

Event binding is also important for child-to-parent communication.

A child component can expose a custom event using output():

saved = output<string>();

The parent can listen to it using event binding:

<app-user (saved)="onSaved($event)"></app-user>

The flow becomes:

Child Component
      ↓
   saved event
      ↓
(saved)="onSaved($event)"
      ↓
Parent Component

So event binding is not limited to native HTML events such as (click).

Event Binding vs Property Binding

These two bindings work in opposite directions.

Example:

<button
  [disabled]="isDisabled"
  (click)="save()">
  Save
</button>

Here:

[disabled]
Component → View
Property Binding

(click)
View → Component
Event Binding

Advantages

1. Easy User Interaction

User actions can directly invoke component methods.

<button (click)="save()">Save</button>

2. Clean Syntax

The event and its handler are easy to identify in the template.

3. Reduces Manual DOM Event Handling

You don't normally need to manually call:

element.addEventListener(...)

Angular manages the event binding.

4. Supports Many Browser Events

For example:

(click)
(input)
(change)
(keyup)
(keydown)
(focus)
(blur)

5. Supports Custom Component Events

It can also listen to events exposed by child components.

Disadvantages

1. Too Much Logic in Templates

Avoid putting complex logic directly inside event expressions.

Instead of:

<button (click)="count = count + 1; calculate(); update(); save()">

prefer:

<button (click)="process()">

and keep the logic in TypeScript.

2. Many Event Bindings Can Make Templates Busy

Large templates containing many event handlers can become harder to read and maintain.

3. $event Requires Correct Typing

When using TypeScript, you may need to work with the appropriate event type, such as:

MouseEvent
KeyboardEvent
Event

Key Points

• Event binding is one-way binding.
• Direction is View → Component.
• It uses parentheses ( ).
• Basic syntax:

(event)="method()"

• (click) handles click events.
• (input) handles input events.
• (keyup) and (keydown) handle keyboard events.
• $event provides information about the event.
• Arguments can be passed to component methods.
• Event binding also supports custom component events.
• It is commonly used for user interaction.

Easy way to remember

[ ]   Property Binding   Component → View

( )   Event Binding      View → Component

Interview Questions and Answers

Q1. What is event binding in Angular?

Answer:
Event binding is a one-way data binding mechanism that allows the Angular template to listen for events and execute component methods.

<button (click)="save()">Save</button>

Q2. What is the direction of event binding?

Answer:

View → Component

For example, a button click in the view can execute a method in the component.

Q3. What is the syntax of event binding?

Answer:

(event)="method()"

Example:

<button (click)="delete()">Delete</button>

Q4. What is $event in Angular?

Answer:
$event is a special Angular template variable containing information about the event that occurred.

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

Q5. Can we pass arguments using event binding?

Answer:
Yes.

<button (click)="deleteProduct(10)">
  Delete
</button>

The value 10 is passed to the component method.

Q6. Can event binding handle keyboard events?

Answer:
Yes.

<input (keyup)="onKeyUp()">

Angular also supports specific key handling:

<input (keyup.enter)="search()">

Q7. What is the difference between property binding and event binding?

Answer:

Property Binding
[property]="value"
Component → View

Event Binding
(event)="method()"
View → Component

Property binding sends data to the UI, while event binding responds to events from the UI.

Q8. Is event binding only for HTML DOM events?

Answer:
No. It can handle both native DOM events and custom events from Angular components.

<!-- DOM event -->
<button (click)="save()">Save</button>

<!-- Child component custom event -->
<app-user (saved)="onSaved($event)"></app-user>