Categories

1 Answer

Sep 13, 2019

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:

  1. @Component({  
  2.   selector: 'app-server2',  
  3.   templateUrl: './server2.component.html',  
  4.   styleUrls: ['./server2.component.css']  
  5. })  
  6. export class Server2Component implements OnInit {  
  7.  allowNewServer = false;  
  8.  serverCreationStatus'No Server is created.';  
  9.   constructor() {  
  10.     setTimeout(() =>{  
  11.       this.allowNewServer = true;  
  12.     }, 5000);  
  13.   }  
  14.   
  15.   ngOnInit() {  
  16.   }  
  17.   
  18. }  

component.html file:

  1. <p>  
  2.   Server2 is also working fine.  
  3. </p>  
  4. <button class="btn btn-primary"  
  5.         [disabled]="!allowNewServer" >Add Server</button>  
  6. <!--<h3 [innerText]= "allowNewServer"></h3>-->  
  7.   
  8. {{serverCreationStatus}}  

Angular 7 Event Binding

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:

  1. <p>  
  2.   Server2 is also working fine.  
  3. </p>  
  4. <button class="btn btn-primary"  
  5.         [disabled]="!allowNewServer"  
  6. (click)="onCreateServer()">Add Server</button>  
  7. <!--<h3 [innerText]= "allowNewServer"></h3>-->  
  8.   
  9. {{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

Click here to read more about Angular JS
Click here to read more about Insurance

Related questions

Madanswer
Sep 13, 2019 in Angular
Sep 13, 2019 in Angular
Sep 13, 2019 in Angular
...