Explain Event Binding in Angular?

Web Development
#1

Event Binding. Event binding allows us to bind events such as keystroke, clicks, hover, touch, etc. to a method in the component. It is one way from view to component. By tracking the user events in the view and responding to it, we can keep our component in sync with the view.

The Angular event binding consists of two parts

We enclose the target event name in parentheses on the left side

Assign it to a template statement within a quote on the right side

Template Reference Variable:

We can also make use of the template reference variable to pass the value

Template reference variable denote by # and followed by variable name

In Template File:

<input #el (input)="handleInput1(el)">
<p>You have entered {{val}}</p>

In Component File:

val="";

handleInput1(element) {

 this.val=element.value;

}