Event Data Binding In Angular

In this article, you will learn about 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. 
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-example',  
  5.   templateUrl: './example.component.html',  
  6.   styleUrls: ['./example.component.css']  
  7. })  
  8. export class ExampleComponent {  
  9.   
  10.   message='';   
  11.   onClickMe()  
  12.   {  
  13.     this.message="Welcome to angular programming..."  
  14.   }  
  15. }  
Step 6
 
Open example.component.html in your application.
  1. button class="btn btn-primary" (click)="onClickMe()">Click me!</button>  
  2. <h2>{{message}}</h2>  
Step 7
 
Open app.component.html and take the selector name from employee.component.ts.
  1. < <app-example></app-example>  
Step 8
 
Run the application by typing the following command.
 
ng serve –open
 
Event Data Binding In Angular
 
DoubleClick Event in angular 
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-example',  
  5.   templateUrl: './example.component.html',  
  6.   styleUrls: ['./example.component.css']  
  7. })  
  8. export class ExampleComponent {  
  9.   message = ''  
  10.   myFunction() {  
  11.     this.message = "You have double clicked";  
  12.   }  
  13. }  
  14. <h4 class="dbClick" (dblclick)="myFunction()">Double-click me</h4>  
  15. <h3 class="text-success">{{message}}</h3>  
Event Data Binding In Angular
 
Add employee Keyup event 
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-example',  
  5.   templateUrl: './example.component.html',  
  6.   styleUrls: ['./example.component.css']  
  7. })  
  8. export class ExampleComponent {  
  9.     
  10.   employees=['Farhan Ahmed'];  
  11.   
  12.   addEmployee(newEmployee:string){  
  13.     if(newEmployee){  
  14.       this.employees.push(newEmployee);  
  15.     }  
  16.   }  
  17.   
  18. <div>  
  19.     <div class="col-md-4">  
  20.         <div class="form-group">  
  21.             <label>Enter Employee Name:</label>  
  22.             <div class="input-group mb-3">  
  23.                 <input class="form-control" #newEmployee (keyup.enter)="addEmployee(newEmployee.value)"  
  24.                     (blur)="newEmployee(newEmployee.value); newEmployee.value=''">  
  25.                 <div class="input-group-append">  
  26.                     <button class="btn btn-primary" (click)="addEmployee(newEmployee.value)">Add New</button>  
  27.                 </div>  
  28.             </div>  
  29.         </div>  
  30.         <li *ngFor="let emp of employees">{{emp}}</li>  
  31.     </div>     
  32. </div>  
Event Data Binding In Angular
 

Summary

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