Event Binding In Angular

Introduction

In this article, we are going to learn how the event binding works in an Angular application. As we know, in any module, an update on property value in component class will update the view template, that is just the data binding. But sometimes we need the data flow on the basis of some event. The event can be a click of a button, movement of a mouse, double-click, on a mouseover etc. So, the data binding is simply the binding of property value in component class to the HTML template, but the event binding binds the value from template to the component class.

 

Prerequisites

• HTML, CSS and JS
• Basics of TypeScript.
• Components

Let us create a sample TestApp. For this you should have installed the below for development environment:

1. Node
2. Npm (comes when you install node)
3. Angular CLI.
4. Text Editor.

For creating a new application run the below command on your location.

> ng new TestApp

Create a new component.

> ng g c test

Once your command is completed you will have TestApp folder created inside your sample folder.

Now, you will have your project folder called 'TestApp'.

Note
See my previous article “Getting started with Angular CLI.” If you want the installation and introduction from the basics then start with the execution of the sample application.

Let us start with the simple property and set the value on click event to the class property and update back to the template.

Open test.component.html and add the below content,

<button (click)='setName()'>setName</button>
<p>Welcome : {{name}}</p>

Open test.component.ts and add the below content,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  public name = '';
  setName(){
    this.name = 'Mohammad Irshad';
  }

  constructor() { }
  ngOnInit() {
  }
}

Click on ‘setName’ button.

 

 

You can see the event is being called and the name is set in your class property and with the help of data binding the value is bound back to the view.

So, with the help of interpolation, we are able to set the value to the view HTML. If you want to send information about the event that is being called, use $ event, which is the special variable of Angular that will give you all the information about the event raised.

Let us pass this variable to click event. Modify the content of test.component.html

<button (click)='setName($event)'>Set Name</button>
<p>Welcome : {{name}}</p>

On your test.component.ts add the below content.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  public name = '';
  setName(event){
    console.log(event);
    this.name = 'Mohammad Irshad';
  }
  constructor() { }
  ngOnInit() {
  }
}

Run the application.

After clicking on ‘Set Name’ button.

You can see in the console about the type of event, like MouseEvent and various parameters like its coordinate, type etc. So with the help of $ event, you will have access to the various properties of the DOM event.

You can also have method statement inside the HTML element. So if you have only a single line of the statement then you can directly write it there. It will be readable and done without any handler event.

<button (click)=”name=’Mohammad Irshad’”>setName</button>
Welcome : {{name}}

So, this is the basics of the event that will capture an event and perform the activities related to it.