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:

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';
  3. @Component({
  4. selector: 'app-example',
  5. templateUrl: './example.component.html',
  6. styleUrls: ['./example.component.css']
  7. })
  8. export class ExampleComponent {
  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';
  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';
  3. @Component({
  4. selector: 'app-example',
  5. templateUrl: './example.component.html',
  6. styleUrls: ['./example.component.css']
  7. })
  8. export class ExampleComponent {
  10. employees=['Farhan Ahmed'];
  12. addEmployee(newEmployee:string){
  13. if(newEmployee){
  14. this.employees.push(newEmployee);
  15. }
  16. }
  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.