Angular 6 Event Binding Example Tutorial

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.

1. click
2. 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.