Q1. What is event binding in Angular?
Event binding allows you to listen to DOM events (like clicks, keyups, mouse movements) and execute component methods. Syntax: (event-name)="expression". The expression is typically a method call. Angular automatically prevents default behavior unless you return false. Event binding is a key part of user interaction.
Q2. How do you pass the $event object to a handler?
When using event binding, the $event object is available. Pass it explicitly:
onInput(event: any) {
console.log(event.target.value);
}
Q3. What are some common DOM events used in Angular?
Common events include: click, submit, mouseenter/mouseleave, focus, blur, input, change, keydown, keyup. You can also listen to custom events emitted by child components using @Output. Any valid DOM event can be bound using the same syntax.
Q4. How do you prevent default behavior in event binding?
In the event handler, you can call event.preventDefault(). For example, to prevent form submission:
onSubmit(event) {
event.preventDefault();
// handle form
}
Q5. Can you use template statements with event binding?
Yes, template statements can include simple assignments or chained expressions, though method calls are recommended. Example: