Learn About Event Binding In Angular

In this article you will learn the following thing:

• Event binding.

Including:

• On Focus
• On Blur (Lost Focus)
• On Click
• On Double Click

• Write event code

In this we are going to use only three (3) files.

• component.html
• component.ts
• component.css

Files and Uses

 

SR. NO.	FILE NAME	DESCRIPTION
1.	app.component.html	To write html code (UI coding).
2.	app.component.ts	To write event based coding.
3.	app.component.css	To write CSS (style sheet) for html.

 

Create project called EVENTBIND

 

Command: ng new EventBind

 

 

 

Project created successfully,

 

 

 

Angular current version detail,

 

Command: ng -v

 

 

 

Execute empty project:

 

Command: ng serve -o

 

 

 

 

Now you can check your default browser,

 

 

 

OUTPUT

 

 

 

Now we open EVENTBIND project inside VS Code.

 

 

 

Select OpenFolder option to open the folder files in VISUAL STUDIO CODE.

 

 

 

Expand folder SRC and double click on app.component.ts file.

 

Now we change the title of App.Component to

 

Your app.component.ts file should look like this,

import {
    Component
} from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Event Binding';
}

As you can see below screenshot title has been changed successfully.

 

 

 

Now switch to app.component.html file we write html code.

 

First remove default code of app.component.html

 

Full Code

 

app.component.html Code

<h1>Welcome to {{ title }}!</h1>
<table>
    <tr>
        <td>
Fullname
</td>
        <td>
            <input id="txtFullName" (focus)="focusMethod()" placeholder="Enter Your Fullname"/>
        </td>
        <td>
Focus Event
</td>
    </tr>
    <tr>
        <td>
Mobile
</td>
        <td>
            <input id="txtMobile" (blur)="blurMethod()" placeholder="Enter Your Mobile Number"/>
        </td>
        <td>
Blur (Lost Focus)
</td>
    </tr>
    <tr>
        <td colspan="3">
            <button (click)="clickMethod()" >Check Click Event</button>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <p (dblclick)="dblclickMethod()">Hello, please double click on me content</p>
        </td>
    </tr>
</table>

app.component.css Code

table, th, td {
   border: 1px solid black;
   border-collapse: collapse;
   padding: 6px;
   text-align:center;
}

app.component.ts Code

import {
    Component
} from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Event Binding';
    focusMethod() {
        alert("Hello FOCUS method is running.");
    }
    blurMethod() {
        alert("Hello, BLUR method is running");
    }
    clickMethod() {
        alert("Hello, CLICK method is running");
    }
    dblclickMethod() {
        alert("Hello, DOUBLE CLICK method is running");
    }
}

OUTPUT

 

 

 

To check the FOCUS event click on FULLNAME textbox you will get the following alert message,

 

 

 

To check the BLUR event type MOBILE number and press tab.

 

 

 

To check the CLICK event, click on button.

 

 

 

To check DOUBLE CLICK on text - “HELLO, PLEASE DOUBLE. . . ”

 

 

 

Happy Coding..

 

In the next article we will learn,

• How to bind dropdown list.
• Change event of dropdown list.