Angular 6 Event Binding Example Tutorial. When the user interacts with a web application in the form of keyboard movement, keystrokes, a mouse click, double click, or a mouseover, on the form submits; it will generate an event. Those events need to be handled to perform some action. This is where event binding comes into the picture. It is a one-way data binding, in that it sends information from the view to a component class. It is opposite from property binding, where data is transmitted from the component class to the view.
Angular 6 Event Binding Example Tutorial
Let us take an angular 6 example and see how event binding works.
#1: Install Angular
Type the following command to create the Angular project.
ng new events
Now, go inside the folder.
cd events
Run the Angular development server using the following command.
ng serve --open
#2: Angular Event Binding
The user expects a UI to respond to his actions on the page. All such action will trigger an event on the page, and the page will respond by listening to these events.
An event binding system provides us the way to append a method defined in a component with an event. Like property binding, event binding is built on top of the events described in the DOM objects.
You can capture an event from the view; you do so by wrapping the event in question with ( ) parenthesis. Angular provides you with a kind of events from which you can call component logic.
Below example is a simple Angular Event Binding example. It is a button click event. Replace the following code inside the app.component.html file.
<!-- app.component.html --> <button (click) = "clicked($event)"> Angular Event Binding </button>
Here, we have defined the click event, and when a user clicks on the event then we can call the function, and we need to define that function inside the component class. So write the following code inside an app.component.ts file.
// app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; clicked(event) { console.log(event); } }
Now, head over to the browser and click on the button and open the dev tools and in the console panel, you can see the button events are the list there. The $event object is the same as an object that the browser sends when the event is triggered on the HTML element. We can get all the details of the event like the source of the event, target element, type of the event, coordinates on the page and screen where the event triggered, as well as many other details.
#Types of Event Binding
There are so many types of events in a browser. I am listing a few of them below.
(focus)="method()" (blur)="method()" (submit)="method()" (scroll)="method()" (cut)="method()" (copy)="method()" (paste)="method()" (keydown)="method()" (keypress)="method()" (keyup)="method()" (mouseenter)="myMethod()" (mousedown)="myMethod()" (mouseup)="myMethod()" (click)="myMethod()" (dblclick)="myMethod()" (drag)="myMethod()" (dragover)="myMethod()" (drop)="myMethod()"
You can find more events on this Mozilla page.
The primary use of event is to run a piece of code based on the action taken by the user. It may include changing values such as few field values in the component, posting data to the REST API, moving from one page to the different page. As the events directly epistolize to the browser’s activities, every event adds an entry to the event loop.
#Handling two events
In this example, we will see the two events on a single button.
- click
- mousemove
Replace the following code inside the app.component.html file.
<div> <div> {{ text }} </div> <button class="btn" (click)='submit($event)' (mousemove)="mouseMove($event)"> Submit </button> <div> {{x}} | {{y}} </div> </div>
Now, add the two event listeners inside the app.component.ts file.
// app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public text: String = 'Text Not submitted yet.'; public x: Number; public y: Number; submit($event: Event) { this.text = 'Text Submitted successfully!'; console.log($event); } mouseMove($event: MouseEvent) { this.x = $event.x; this.y = $event.y; } }
So, in this example, when the mouse moves on the button, it will display the coordinates of x and y, and when we click the button, the text will change it to Text Submitted Successfully.
Finally, Angular 6 Event Binding Example Tutorial is over. Thanks for taking.

Krunal Lathiya is an Information Technology Engineer by education and web developer by profession. He has worked with many back-end platforms, including Node.js, PHP, and Python. In addition, Krunal has excellent knowledge of cloud technologies including Google Cloud, Firebase, AWS, and Azure, and various softwares and tools.