Event Binding In Angular

The Code Points May 25, 2022 0

In this article, we learn about the Angular Event Binding. One approach from view to component is by event binding. When the user takes an action in the view, like as clicking a button or altering the input, we use it to conduct an action in the component.

We may connect events like keystrokes, clicks, hovers, and touches to a method in a component using event binding. From view to component, there is only one path. We may maintain our component in sync with the view by tracking and responding to user events in the view. When a user updates an input in a text box, for example, we can update the component's model, run some validations, and so on. We can store the model to the backend server after the user submits the button.

Syntax Of Event Binding

There are two parts to the Angular event binding.

(target-event)="TemplateStatement"

On the left side, we put the name of the target event in parenthesis. Assign it to a template statement on the right side of a quote.

A target event name enclosed in parentheses to the left of an equal sign, and a quoted template statement to the right, is the Angular event binding syntax.

The event binding that follows listens for button click events and calls the component's onSave() method whenever one happens.

<button (click)="onSave()">Save</button>

Example Of Event Binding

Create a new angular application using following command.

ng new event-Binding

Now, open the app.component.html and add the following code

<h1 [innerText]="title"></h1>
 
<h2>Example 1</h2>
<button (click)="clickMe()">Click Me</button>
<p>You have clicked {{clickCount}}</p>

Now, open the app.component.ts and add the following code

clickCount=0
  clickMe() {
    this.clickCount++;
  }

The component in the above example listens for the button's click event. The clickMe() method is then called, and the clickCount is increased by one.

Multiple event handlers

You can also use a semicolon to separate an unlimited number of event handlers on the same event.

Add a new property to the component.

clickCount1=0;

Call the clickMe() method in the template, then assign clickCount1=clickCount

//Template
 
<h2>Example 2</h2>
<button (click)="clickMe() ; clickCount1=clickCount">Click Me</button>
<p>You have clicked {{clickCount}}</p>
<p>You have clicked {{clickCount1}}</p>

$event Payload

The event payload is carried by DOM Events. That is, the details of the incident. The event payload can be accessed by passing $event as an argument to the handler function.

<input (input)="handleInput($event)">
<p>You have entered {{value}}</p>

And in the component

value=""
handleInput(event) {
  this.value = (event.target as HTMLInputElement).value;
}

Depending on the type of DOM event, the characteristics of a $event object differ. A mouse event, for example, has different information than an input box editing event.

In the Template statement, remember to use the variable $event. handleInput($event), for example. Otherwise, there will be an error.

Key event filtering

To listen for keystrokes, we employ keyup/keydown events. This is demonstrated in the following example.

<input (keyup)="value1= $any($event.target).value" />
<p>You entered {{value1}}</p>

Keystrokes are detected via keyup/keydown events. As an example, consider the following.

<input (keyup.enter)="value2=$any($event.target).value">
<p>You entered {{value2}}</p>

Here's an interesting case in point. The value3 variable is updated when you press the enter key, and it is cleared when you use the escape key.

<input (keyup.enter)="value3=$any($event.target).value" (keyup.escape)="$any($event.target).value='';value3=''">
<p>You entered {{value3}}</p>

Conclusion

In this article, we learned about the Angular Event Binding with examples. In next article, we will learn about the two-way data binding in angular.