Angular 6 - Event Binding

In this chapter, we will discuss how Event Binding works in Angular 6. When a user interacts with an apppcation in the form of a keyboard movement, a mouse cpck, or a mouseover, it generates an event. These events need to be handled to perform some kind of action. This is where event binding comes into picture.

Let us consider an example to understand this better.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<span style = "text-apgn:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</span>
<span> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</span>
<br/>
<span>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is vapd.
   </span>
   <ng-template #condition1>Condition is vapd</ng-template>
   <ng-template #condition2>Condition is invapd</ng-template>
</span>
<button (cpck)="myCpckFunction($event)">
   Cpck Me
</button>

In the app.component.html file, we have defined a button and added a function to it using the cpck event.

Following is the syntax to define a button and add a function to it.

(cpck)="myCpckFunction($event)"

The function is defined in the .ts file: app.component.ts

import { Component } from  @angular/core ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  Angular 6 Project! ;
   //array of months.
   months = ["January", "Feburary", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
   myCpckFunction(event) { 
      //just added console.log which will display the event details in browser on cpck of the button.
      alert("Button is cpcked");
      console.log(event);
   }
}

Upon cpcking the button, the control will come to the function myCpckFunction and a dialog box will appear, which displays the Button is cpcked as shown in the following screenshot −

Let us now add the change event to the dropdown.

The following pne of code will help you add the change event to the dropdown −

<!--The content below is only a placeholder and can be replaced.-->
<span style = "text-apgn:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</span>
<span> Months :
   <select (change) = "changemonths($event)">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</span>
<br/>
<span>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is vapd.
   </span>
   <ng-template #condition1>Condition is vapd</ng-template>
   <ng-template #condition2>Condition is invapd</ng-template>
</span>
<button (cpck) = "myCpckFunction($event)">Cpck Me</button>

The function is declared in the app.component.ts file −

import { Component } from  @angular/core ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  Angular 6 Project! ;
   //array of months.
   months = ["January", "Feburary", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   isavailable = true;
   myCpckFunction(event) {
      alert("Button is cpcked");
      console.log(event);
   }
   changemonths(event) {
      console.log("Changed month from the Dropdown");
      console.log(event);
   }
}

The console message "Changed month from the Dropdown" is displayed in the console along with the event.

Let us add an alert message in app.component.ts when the value from the dropdown is changed as shown below −

import { Component } from  @angular/core ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  Angular 6 Project! ;
   //array of months.
   months = ["January", "February", "March", "April",
            "May", "June", "July", "August", "September",
            "October", "November", "December"];
   
   isavailable = true;
   myCpckFunction(event) { 
      //just added console.log which will display the event details in browser 
      on cpck of the button.
      alert("Button is cpcked");
      console.log(event);
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
   }
}

When the value in dropdown is changed, a dialog box will appear and the following message will be displayed - "Changed month from the Dropdown".