Event Data Binding In Angular

Introduction

This article will explain Event Data Binding in Angular. I will discuss event binding with examples.

How to handle events in Angular?

Any activity like button click, mouse click, mouse hover, mouse move, etc. of a user on the front-end or a web screen is termed as an event. Such events are passed from the View (.HTML) page to a TypeScript component (.ts).

List of the events in Angular applications:

Click: The event occurs when the user clicks on an element
Dbclick: The event occurs when the user double-clicks on an element
Blur: The event occurs when an element loses focus
Submit: The event occurs when a form is submitted
Focus: The event occurs when an element gets focus
Scroll: The event occurs when an element's scrollbar is being scrolled
Cut: The event occurs when the user cuts the content of an element
Copy: The event occurs when the user copies the content of an element
Paste: The event occurs when the user pastes some content in an element
Keyup: The event occurs when the user releases a key
Keypress: The event occurs when the user presses a key
Keydown: The event occurs when the user is pressing a key
Mouseup: The event occurs when a user releases a mouse button over an element
Mousedown: The event occurs when the user presses a mouse button over an element
Mouseenter: The event occurs when the pointer is moved onto an element
Drag: The event occurs when an element is being dragged
Drop: The event occurs when the dragged element is dropped on the drop target
Dragover: The event occurs when the dragged element is over the drop target

Let us see this with a demo.

Step 1

Open a command prompt from Windows Search.

Step 2

Create a new project in Angular.

ng new AngularDemo

Step 3

Open the project in Visual Studio Code and type the following command to open the project:

Code .

Step 4

Open terminal in Visual Studio Code and create a component "employee".

ng g c example

Step 5

Open the example component in your application.

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
message='';
onClickMe()
{
this.message="Welcome to angular programming..."
}
}

Step 6

Open example.component.html in your application.

button class="btn btn-primary" (click)="onClickMe()">Click me!</button>
<h2>{{message}}</h2>

Step 7

Open app.component.html and take the selector name from employee.component.ts.

< <app-example></app-example>

Step 8

Run the application by typing the following command.

ng serve –open

DoubleClick Event in angular

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
message = ''
myFunction() {
this.message = "You have double clicked";
}
}
<h4 class="dbClick" (dblclick)="myFunction()">Double-click me</h4>
<h3 class="text-success">{{message}}</h3>

Add employee Keyup event

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
employees=['Farhan Ahmed'];
addEmployee(newEmployee:string){
if(newEmployee){
this.employees.push(newEmployee);
}
}
<div>
<div class="col-md-4">
<div class="form-group">
<label>Enter Employee Name:</label>
<div class="input-group mb-3">
<input class="form-control" #newEmployee (keyup.enter)="addEmployee(newEmployee.value)"
(blur)="newEmployee(newEmployee.value); newEmployee.value=''">
<div class="input-group-append">
<button class="btn btn-primary" (click)="addEmployee(newEmployee.value)">Add New</button>
</div>
</div>
</div>
<li *ngFor="let emp of employees">{{emp}}</li>
</div>
</div>

Summary

In this article, I have explained Event Data Binding in Angular applications. I hope you understood the concept.