Unleash User Interaction in Angular: Mastering Event Binding

Unlock the power of user interaction in your Angular applications with event binding! This comprehensive guide empowers you to create dynamic and responsive UIs. Learn how to handle button clicks, form input, and various other events with ease. Discover techniques like (click), $event, and event bubbling to build seamless user experiences. Enhance your Angular development skills and take your applications to the next level!

Events are handled in Angular using this special syntax:

(target event name) = "template statement"

Bind the target event name within parentheses on the left of an equal sign, and the event handler method or statement on the right.

Example: Binding Button Click Event

<button (click)="onShow()">Show</button>

The (click) binds the button click event and onShow() calls the onShow() method of a component.

Example: Handle Button Click Event in Component

@Component({
selector: 'event-demo',
template: '<button (click)="onShow()">Show</button>'
})
export class EventBindingDemoComponent implements OnInit {
constructor() { }

ngOnInit(): void { }

onShow() {
alert('Show button clicked!');
}
}

Alternatively, use the on- prefix:

Example: on-event

<button on-click="onShow()">Show</button>

By default, an event propagates up to the parent container event.

Example: Event Bubbling

<div (click)="onDivClick()">
<button (click)="onShow()">Show</button>
</div>

$event contains information about an event. Pass the number or string value to the event handler function:

Example: Passing Event Data

<button (click)="onShow(20)">Show</button>

Angular includes $event with information about an event:

Example: $event

<button (click)="onShow($event)">Show</button>

Define the onShow(event) method. The event parameter type can be KeyboardEvent, MouseEvent, etc. Use “any” type if unsure:

Example: event Parameter

onShow(event:any) {
console.log(event);
}

If event is a native DOM element event, use $event.target to get the DOM element reference:

Example: Event Handling

<button (click)="onShow($event)">Show</button>

// component method
onShow(event:any) {
alert(event.target.innerHTML); // returns Show
}

Bind a component property to $event.target.value without using ngModel:

Example: Bind Event without ngModel

<input type="text" (input)="userName=$event.target.value"><br/>

How Event Binding Works in Angular 2 (v11)

Event binding allows you to write code that listens for specific actions in your app, like button clicks or typing in a form. The basic format is:

(target event name) = "what to do when the event happens"

Example: Making a Button Say Hello

This code shows a button that says "Show" and displays an alert when clicked:

<button (click)="onShow()">Show</button>

(click) is the target event (listening for a click).

onShow() is what the app will do when clicked (calls a method).

Behind the Scenes

The onShow() method lives in your component class and defines what happens:

onShow() {
alert('Show button clicked!');
}

Another Way to Write It

You can also write event binding using on-:

<button on-click="onShow()">Show</button>

Events Bubbling Up

By default, events "bubble up" to parent elements. If you have a button inside a container, clicking the button will trigger events for both the button and the container (if they have event listeners).

Getting Information from Events

Sometimes, you want to know more about the event that happened. Use the special variable $event to get details about the event, like what element was clicked.

Example: Passing Data

You can pass data to your event handler method:

<button (click)="onShow(20)">Show</button>

Summary

• Event binding lets your app react to user interactions.
• Use (target event name) to listen for events.
• Define methods in your component class to handle events.
• Use $event to get information about the event.