Event binding in Angular

Event binding in Angular

Event binding is used in Angular 8 to handle events triggered by user activities like button clicks, mouse movements, keystrokes, etc. The component's defined function is called when a DOM event occurs on an element (for example, a click, a key-down, or a key-up).

You utilize the Angular event binding syntax to bind to an event.The name of the target event is enclosed in parentheses to the left of the corresponding symbol, and the quoted template statement is to the right.. The target event name is clicked in the example below, and the template statement is onSave ().

We may tie events like keystrokes, clicks, hovers, and touches to a function in a component using event binding. From the view of the component, there is only one path. We can maintain our component in sync with the view by tracking and responding to user events. When a user updates an input in a text box, we may update the component's model, run some validations, and so on.

How event binding works

Angular sets up an event handler for the target event when using event binding. With your custom events, event binding is possible.
The handler runs the template statement after the component or directive raises the event. As a result of the occurrence, the template statement takes action.