TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

Angular 7 Event Binding

Angular 7 Event Binding with angular7, tutorial, introduction, angular, js, Installation, History and Versions, First App, files explanation, Components, Directives, ngIf Directive, ngFor Directive, ngClassDirective, ngStyle Directive, Angular7 with Bootstrap etc.

<< Back to ANGULAR

Angular 7 Event Binding

Angular facilitates us to bind the events along with the methods. This process is known as event binding. Event binding is used with parenthesis ().

Let's see it by an example:

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

  ngOnInit() {
  }

}

component.html file:

<p>
  Server2 is also working fine.
</p>
<button class="btn btn-primary"
        [disabled]="!allowNewServer" >Add Server</button>
<!--<h3 [innerText]= "allowNewServer"></h3>-->

{{serverCreationStatus}}
Angular 7 Event Binding

It will give an output that "No Server is created".

Now, we are going to bind an event with button.

Add another method onCreateServer() in component.ts file which will call the event.

component.html file:

<p>
  Server2 is also working fine.
</p>
<button class="btn btn-primary"
        [disabled]="!allowNewServer"
(click)="onCreateServer()">Add Server</button>
<!--<h3 [innerText]= "allowNewServer"></h3>-->

{{serverCreationStatus}}

Output:

Now, after clicking on the button, you will see that it is showing server is created. This is an example of event binding.

Angular 7 Event Binding

How to use data with Event Binding?

Let's understand it by an example. Here, we will create a method named "onUpdateServerName" and add an event with it.

component.html file:

<label>Server Name</label>
<input type="text"
       class="form-control"
       (input)="OnUpdateServerName($event)">
<p>{{serverName}}</p>

component.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-server2',
  templateUrl: './server2.component.html',
  styleUrls: ['./server2.component.css']
})
export class Server2Component implements OnInit {
 allowNewServer = false;
  serverName = '';
  constructor() {
    setTimeout(() =>{
      this.allowNewServer = true;
    }, 5000);
  }

  ngOnInit() {
  }
  OnUpdateServerName(event: Event) {
    this.serverName = (<HTMLInputElement>event.target).value;
  }
}

Output:

Angular 7 Event Binding

You can see that when you type anything in the block, it dynamically updates it below the input. This is how we can use $event to fetch the event's data.






Related Links:


Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf