What is Event Binding in Angular?
💡 Concept Name
Event Binding – A way in Angular to listen and respond to user actions such as clicks, key presses, or mouse movements.
📘 Quick Intro
Event binding allows the application to respond to DOM events by executing specified component logic. It uses parentheses syntax like (click) or (input).
🧠 Analogy / Short Story
Think of it like a doorbell—when someone presses it (clicks), the bell rings (method executes). Event binding wires up the button to a response.
🔧 Technical Explanation
- 🖱️ Uses
(eventName)syntax to capture DOM events. - 📦 Binds the event to a component method.
- 🔄 Supports standard DOM events like click, input, keyup, etc.
- 🚀 Executes the method in response to the user action.
- 🔐 Keeps the logic encapsulated within the component class.
🎯 Purpose & Use Case
- ✅ Handle button clicks
- ✅ React to user typing
- ✅ Form submissions and validation triggers
- ✅ Keyboard shortcut actions
💻 Real Code Example
// app.component.ts
export class AppComponent {
message: string = "";
showMessage() {
this.message = "Button was clicked!";
}
}<!-- app.component.html -->
<button (click)="showMessage()">Click Me</button>
<p>{{ message }}</p>
❓ Interview Q&A
Q1: What is event binding in Angular?
A: It binds a DOM event to a method in the component.
Q2: What syntax is used for event binding?
A: (eventName)="methodName()"
Q3: Can you pass arguments to the method?
A: Yes, like (click)="sayHi('Angular')"
Q4: What types of events can be handled?
A: Clicks, inputs, keypresses, mouse events, etc.
Q5: Where is the event logic handled?
A: Inside the component’s class method.
💡 Bonus Insight
To access the event object, use (click)="handleClick($event)" and define your method to accept the event parameter. It helps you get event-specific data like target value.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!