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
Event Binding In Angular
Project created successfully,
Event Binding In Angular
Angular current version detail,
Command: ng -v
Event Binding In Angular
Execute empty project:
Command: ng serve -o
Event Binding In Angular
Event Binding In Angular
Now you can check your default browser,
Event Binding In Angular
OUTPUT
Event Binding In Angular
Now we open EVENTBIND project inside VS Code.
Event Binding In Angular
Select OpenFolder option to open the folder files in VISUAL STUDIO CODE.
Event Binding In Angular
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,
  1. import {
  2. Component
  3. } from '@angular/core';
  4. @Component({
  5. selector: 'app-root',
  6. templateUrl: './app.component.html',
  7. styleUrls: ['./app.component.css']
  8. })
  9. export class AppComponent {
  10. title = 'Event Binding';
  11. }
As you can see below screenshot title has been changed successfully.
Event Binding In Angular
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
  1. <h1>Welcome to {{ title }}!</h1>
  2. <table>
  3. <tr>
  4. <td>
  5. Fullname
  6. </td>
  7. <td>
  8. <input id="txtFullName" (focus)="focusMethod()" placeholder="Enter Your Fullname"/>
  9. </td>
  10. <td>
  11. Focus Event
  12. </td>
  13. </tr>
  14. <tr>
  15. <td>
  16. Mobile
  17. </td>
  18. <td>
  19. <input id="txtMobile" (blur)="blurMethod()" placeholder="Enter Your Mobile Number"/>
  20. </td>
  21. <td>
  22. Blur (Lost Focus)
  23. </td>
  24. </tr>
  25. <tr>
  26. <td colspan="3">
  27. <button (click)="clickMethod()" >Check Click Event</button>
  28. </td>
  29. </tr>
  30. <tr>
  31. <td colspan="3">
  32. <p (dblclick)="dblclickMethod()">Hello, please double click on me content</p>
  33. </td>
  34. </tr>
  35. </table>
app.component.css Code
  1. table, th, td {
  2. border: 1px solid black;
  3. border-collapse: collapse;
  4. padding: 6px;
  5. text-align:center;
  6. }
app.component.ts Code
  1. import {
  2. Component
  3. } from '@angular/core';
  4. @Component({
  5. selector: 'app-root',
  6. templateUrl: './app.component.html',
  7. styleUrls: ['./app.component.css']
  8. })
  9. export class AppComponent {
  10. title = 'Event Binding';
  11. focusMethod() {
  12. alert("Hello FOCUS method is running.");
  13. }
  14. blurMethod() {
  15. alert("Hello, BLUR method is running");
  16. }
  17. clickMethod() {
  18. alert("Hello, CLICK method is running");
  19. }
  20. dblclickMethod() {
  21. alert("Hello, DOUBLE CLICK method is running");
  22. }
  23. }
OUTPUT
Event Binding In Angular
To check the FOCUS event click on FULLNAME textbox you will get the following alert message,
Event Binding In Angular
To check the BLUR event type MOBILE number and press tab.
Event Binding In Angular
To check the CLICK event, click on button.
Event Binding In Angular
To check DOUBLE CLICK on text - “HELLO, PLEASE DOUBLE. . . ”
Event Binding In Angular
Happy Coding..
In the next article we will learn,