Learn About Event Binding In Angular

In this article you will learn the following thing:

Including:

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

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,

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>