Angular » Event Binding

Event Binding : Meaning
An action performed by the user on the HTML page is an event, typically using mouse or a keyboard. A user can type in a text box, click on a checkbox, right click on the page. All these are considered as events. Enabling the HTML elements to respond to user actions is called Event handling. In order to perform some specific actions when particular event occurs, an event handler function is required.
Putting all these together, namely, adding support over an HTML element for a particular event and providing a handler function to perform action on that event is called Event Binding. In simpler words, when an element contains support to handle an event, it is called event binding. Common events are click, key up, mouse movement.

Event Binding : How?
Angular components support event binding. It is done by declaring the type of event which needs to be handled, the name of function which shall handle the event and by defining the body of this function. Declaring the event type and the name of handler function is done in the HTML template while the definition of handler function is provided in the component class.  Let’s look the example.
Suppose HTML template of a component is

Say we want to perform an action when checkbox is clicked and an action when the user types something in the text box and moves to another element. Thus, the event on the checkbox will be click and the event on the text box will be focusout.

Event Binding : Syntax
Event name enclosed within parenthesis followed by the name of the handler function is written on the HTML element which should have the event. Thus, syntax is

Example, click and focusout events, as discussed above, will be applied over respective elements in HTML template as

Component class for the HTML template will contain the definition of these handler methods as

export class CodippaComponent {

   private focusoutHandler() {
      console.log("Focus lost");
   }
   private handleClick() {
      console.log("Checkbox clicked");
   }
}

Accessing Event Object
Each type of event has an object which contains useful information about the event. Often it is necessary to gain access to the event object. Example, when processing mouse events, it is required to know the coordinates of mouse movement. This can be done by providing the event object when declaring the handler function in the HTML template as

Handler function in the component should also be modified to receive the event object as

export class CodippaComponent {

   private focusoutHandler(event) {
      console.log(e);
   }
   private handleClick() {
      console.log(e.target);
   }
}

Though $event object provides information about the event which occurred but passing it around is not considered a good practice since it reveals more information about the HTML template element more than what is required to the component class. This breaks the separation of concerns principle between the template and its component.

Event Propagation or Event Bubbling
In an HTML template or DOM, elements are usually arranged in a hierarchy. That is, element A would be inside element B which would be inside another element C and so on. If an event takes place at a child element then it moves up to the entire DOM hierarchy until all the parent elements are covered or the event is stopped by a parent element or by the source element itself. This is called Event Propagation or Event Bubbling. Example,

Corresponding component class is

export class CodippaComponent {

   private handleParentClick() {
      console.log("Parent clicked");
   }
   private handleClick() {
      console.log("Checkbox clicked");
   }
}

This is because when the child was clicked, its handler method gets called. Now the click event bubbles up the DOM, finds a click event handler at the parent and calls its handler function. If there are some more click event handlers up the DOM, then they will also be called.

How to stop Event Bubbling
If you have parent elements handling the same event as the child and you don’t want their handler functions to be called, then you need to stop the event from bubbling up the child. This is done by calling stopPropagation function on the event object. Thus, the event handler function of the child will be modified to

private handleClick(event) {
   event.stopPropagation();
   console.log("Checkbox clicked");
}