Chapter 3.3☕ 15 min read

Event Binding ( ) and $event

Event binding lets you respond to user interactions like clicks, typing, and form submissions.

01What is Event Binding

Event binding uses parentheses (event)="handler()" to listen to DOM events and call TypeScript methods in response.

"Event binding = doorbell — button dabaya toh TypeScript ko pata chala." When the user clicks a button, Angular calls your method.

This is the opposite direction of property binding:

Property binding [property]="value" → TypeScript → Template
Event binding (event)="handler()" → Template → TypeScript

Together, they form the foundation of Angular's template interaction model.

02Common Events

Here are the most common events you'll bind to:

(click)="onSave()" — Button click (most common!)
(input)="onTyping($event)" — Typing in input field
(keyup.enter)="onEnter()" — Specific key press (Enter)
(submit)="onSubmit($event)" — Form submission
(mouseover)="onHover()" — Mouse enters element
(focus)="onFocus()" — Input receives focus
(blur)="onBlur()" — Input loses focus
(change)="onChange()" — Select/checkbox value changes

"Jitna DOM events hai, utna binding possible." Any DOM event can be bound.

03The $event Object

The $event object contains details about the event that occurred:

Click: $event is MouseEvent → .clientX, .clientY, .target
Input: $event is Event → .target.value gives the typed text
Submit: $event is SubmitEvent → call .preventDefault() to stop page refresh
Keyup: $event is KeyboardEvent → .key, .code

<input (input)="onTyping($event.target.value)">\n<button (click)="onClick($event.clientX, $event.clientY)">

"$event = courier — event ke saath saath data bhi laata hai." Always carry relevant event data.

04Passing Arguments with Events

You can pass component data along with or instead of $event:

<!-- Just component data -->\n<button (click)="onSave(biryani.id)">Save</button>\n\n<!-- Both event AND component data -->\n<button (click)="onSave($event, biryani.id)">Save</button>\n\n<!-- Chain access on $event -->\n<input (keyup.enter)="search($event.target.value)">

"Ek saath event aur data dono chahiye toh dono pass karo." This pattern is extremely common — you often need the event for UI feedback AND component data for business logic.

05Template Statements — What You Can Do

Inside an event binding, you write a template statement — not an expression. Statements can:

✅ Call methods: (click)="save()"
✅ Assign properties: (click)="isActive = !isActive"
✅ Use ternary: (click)="count > 0 ? decrement() : null"

Statements CANNOT:

❌ Declare variables: let x = 5
❌ Use if/else blocks: if(x) { ... }
❌ Use for loops: for(let i of items)

"Simple ek line ka kaam — complex logic component mein." Keep it to one simple operation.

Key Takeaways

✅ Event binding (event)="handler()" listens to DOM events and triggers TypeScript methods.
✅ Opposite direction of property binding: Template → TypeScript.
✅ $event carries event details — MouseEvent, KeyboardEvent, InputEvent, etc.
✅ Pass $event, component data, or both to handler methods.
✅ Template statements are one-line operations — complex logic goes in component methods.

Previous3.2 — Property Binding 📋 All Chapters Next Chapter3.4 — Two-Way Binding →