Angular 6 Event Binding

Angular 6 Event Binding

In this chapter , we will discuss how Event Binding works in Angular 6. If a user interacts with an application in the context of a cursor movement, a mouse button, or a mouseover, it creates an event. These things must be managed in order to conduct any form of operation. That is where the binding of things comes into picture.

To understand this further, let's take an case.

app.component.html

<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1> valid Condition</ng-template>
   <ng-template #condition2> invalid Condition</ng-template>
</div>
<button (click)="myClickFunction($event)">
   Click Me
</button>

We also specified a button in the app.component.html file and applied a feature to it using the click case.

The notation for describing a button and applying a function to it follows.

(click)="myClickFunction($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 = ["Jan", "Feb", "Mar", "Apr",
            "May", "June", "Jul", "Aug", "Sep",
            "Oct", "Nov", "Dec"];
   isavailable = true;
   myClickFunction(event) { 
      
      alert("Button is clicked");
      console.log(event);
   }
}

Once you click the button, the control comes to the myClickFunction function and a dialog box opens, which displays the button kept clicking.

Let's add in the dropdown the change event now.

The following line of code will enable you add to the dropdown the change event.

<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> Months :
   <select (change) = "changemonths($event)">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1> valid Condition</ng-template>
   <ng-template #condition2> invalid Condition</ng-template>
</div>
<button (click) = "myClickFunction($event)">Click 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.
   Select months = ["Jan", "Feb", "Mar", "Apr",
            "May", "June", "Jul", "Aug", "Sep",
            "Oct", "Nov", "Dec"];
   isavailable = true;
   myClickFunction(event) {
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      console.log("Changed month from the Dropdown");
      console.log(event);
   }
}

Let us add an alert message in app.component. −

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 = ["Jan", "Feb", "Mar", "Apr",
            "May", "June", "Jul", "Aug", "Sep",
            "Oct", "Nov", "Dec"];
   
   isavailable = true;
   myClickFunction(event) { 
      //just added console.log which will display the event details in browser 
      on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      alert("Changed month from the Dropdown");
   }
}