Angular Event Binding Sample Example

 In the previous Example, we have seen the data flow from component to Html. In this example we will learn how the data flow from html to component.

When a user interacts with an application in the form of a keyboard movement, button click, mouse over, selecting from a drop-down list, typing in a textbox, etc. it generates an event. These events need to be handled to perform some kind of action.

Binding component class method to html element event is called "event binding"
Syntax:
   <tagname (eventname)="methodname">

Event binding requires parenthesis ()

Angular event names are similar to html event names without "on" keyword
   html events                  angular events
       |                             |
    onclick                        click
    onmouseenter                   mouseenter
    onmouseleave                   mouseleave
         ..                           ..

 <input type="button"  onclick=".."  (click)="..">

 ->html event requires javascript function
 ->angular event requires component class method

With event binding, you can also use the on- prefix alternative . This is known as the canonical form. It’s up to you which approach you follow. Behind the scene, they are going to perform the same task.

Sample Examples on Event Binding

Make the following changes in .ts file

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

@Component({
  selector: 'app-eventbinding',
  templateUrl: './eventbinding.component.html',
  styleUrls: ['./eventbinding.component.css']
})
export class EventbindingComponent {
  onClick(): void {
    console.log('Button is Clicked');
   }
   msg:string="";
  textcolor:string="blue";

  m1(s:string)
  {
    this.msg=s;
  }
  m2(){
    this.msg="";
  }
}

.html changes

<button (click)="onClick()">Click Me </button>
<button (mouseenter)="m1('user details will be saved')" (mouseleave)="m2()">Register</button>
<h3 [style.color]="textcolor">{{msg}}</h3>

Output

When we click on Click Me

























When we mouse over on the Register Button , the below message 




Execution flow:
---------------
  mouseleave
  <---------register button<------mouseenter
  |                                  | user details ..
  |      {{msg}}<-------------------m1(s){
  |         |                          this.msg=s; }
  |     user details will be saved
 m2()
 {           |
  this.msg="";
 }  


Working with Tables 

We will add a Show Details Buttons based on that we will display the image


.ts file change

import { Component } from '@angular/core';
import { Prods } from 'src/Prods';
@Component({
  selector: 'app-eventbinding',
  templateUrl: './eventbinding.component.html',
  styleUrls: ['./eventbinding.component.css']
})
export class EventbindingComponent {
  onClick(): void {
    console.log('Button is Clicked');
   }
   msg:string="";
  textcolor:string="blue";
  m1(s:string)
  {
    this.msg=s;
  }
  m2(){
    this.msg="";
  }
  public Product: Prods[] =[
    new Prods('Samsung', 122,'assets\\Samsung.jpg'),
    new Prods('Sony', 1252,'assets\\Sony.jpg'),
    new Prods('Iphone', 1232,'assets\\Iphone.jpg'),
    new Prods('OnePlus', 1822,'assets\\OnePlus.jpg')
  ];
    
    ShowDetails: boolean = false;
    ToggleDetails(): void {
        this.ShowDetails = !this.ShowDetails;
    }
}

.html Changes

<button (click)="onClick()">Click Me </button>
<button (mouseenter)="m1('user details will be saved')" (mouseleave)="m2()">Register</button>
<h3 [style.color]="textcolor">{{msg}}</h3>
<h1> Table with Event Binding</h1>
<table>
    <thead>
        <tr>
            <th>
                Product Details
           </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let products of Product">
            <td>{{products.Name}}</td>
            <td>{{products.Price}}</td>
            <td *ngIf='ShowDetails'> <img [src]="products.Photo" width="100" height="100" > </td>
        </tr>
    </tbody>
</table>
<br/>
<button (click)='ToggleDetails()'>
    {{ShowDetails ? 'Hide' : 'Show'}} Details
</button>




On Clicking on Show Details