Angular 7 Event Binding

The process of binding the events along with the methods is known as event binding. It is used with parenthesis ().

Example:

@Component({  
  selector: 'app-server',  
  templateUrl: './server.component.html',  
  styleUrls: ['./server.component.css']  
})  
export class ServerComponent implements OnInit {  
 allowNewServer = false;  
 serverCreationStatus= 'No Server is created.';  
  constructor() {  
    setTimeout(() =>{  
      this.allowNewServer = true;  
    }, 5000);  
  }  
  
  ngOnInit() {  
  }  
  
}  

component.html file:

Server is working fine.

{{serverCreationStatus}}

Output:

To bind an event with button:

To bind an event with a button, we are adding another method onCreation() in the component.ts file to call the event.

component.html file:

Server is working fine.

{{serverCreationStatus}}

Output:

Explanation:

In the above example, we are demonstrating event binding. Here, it will be displayed that the server is created, on clicking on the button.

To use data with Event Binding:

To understand the use of data with Event Binding, we are creating a method named “onNameUpdate”. We are then adding an event with it.

component.html file:

  
  

{{serverName}}

component.ts file:

import { Component, OnInit } from '@angular/core';  
  
@Component({  
  selector: 'app-server',  
  templateUrl: './server.component.html',  
  styleUrls: ['./server.component.css']  
})  
export class ServerComponent implements OnInit {  
 allowNewServer = false;  
  serverName = '';  
  constructor() {  
    setTimeout(() =>{  
      this.allowNewServer = true;  
    }, 5000);  
  }  
  
  ngOnInit() {  
  }  
  onNameUpdate(event: Event) {
   this.serverName = (event.target as HTMLInputElement).value;
 }
}

Output:

Explanation:

In the above example, we are demonstrating the use of the $event to fetch the event’s data. The Angular dynamically updates it below the input, on typing anything in the block. Here, we are typing the name of the server which is dynamically displayed below the input.