Angular 8 Session 12 - Event Binding In Angular

Event Binding In Angular

* An Event describes a real time activity like walking, talking, dancing etc... a person goes with. Same a computer program receives some events from end user that executes and gives some output.

* Event Binding flows the data in opposite direction i.e. from HTML control to component.

* When user performs an action such as Clicking a button, Changing dropdown value, Hovers on an element, Typing in a textbox, Tick mark in checkbox etc… event binding receives and processes the data.

* Event Binding allows you to listen for certain events such as keystrokes, mouse movements, clicks, and touches.


* Event Binding syntax relies on event name inside a pair of parentheses resides in left side of equal sign ‘=’ and in right side the template statement quoted in right side as shown below.

* The above expression also can be written with on-prefix, called canonical form.

<button id=“btnOnClick” on-click=“onClick()”>Click Me!</button>

* Let’s consider one more example to test event binding with change event of drop down. Upon Selection of dropdown value data need to show fully or partially.

 

app.component.html

<div>

  <button id="btnClick" (click)="onClick()">Click Me!</button>

  <br /><br />

  <select (change)="toggleView()">

    <option *ngFor="let item  of dropdownOpts" [value]="item.itemValue">{{item.itemName}}</option>

  </select>

  <br /><br />

  <table border="1" style="text-align: left;">

    <tr>

      <th>Name</th>

      <td>{{name}}</td>

    </tr>

    <tr>

      <th>Age</th>

      <td>{{age}}</td>

    </tr>

    <tr *ngIf="fullView">

      <th>Employeer</th>

      <td>{{employeer}}</td>

    </tr>

    <tr *ngIf="fullView">

      <th>Date Of Birth</th>

      <td>{{dob}}</td>

    </tr>

    <tr *ngIf="fullView">

      <th>Address</th>

      <td>{{address}}</td>

    </tr>

  </table>

</div>

app.component.ts

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

import { IDropdownItem } from './Model/idropdown-item';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  name: string = 'Rakesh Upadhaya';

  age: number = 30;

  employeer: string = 'ABC Pvt. Ltd';

  dob: string = '21st June 1989';

  address: string = 'Kolkata, West Bengal.';

  fullView: boolean = false;

  public dropdownOpts: IDropdownItem[] = [

    { itemName: "Hide Details", itemValue: false },

    { itemName: "Show Details", itemValue: true }

  ];

  // Methods

  onClick(): void {

    alert('Button Clicked!');

  };

  toggleView() {

    this.fullView = !this.fullView;

  };

};

 

idropdown-item.ts

export interface IDropdownItem {

    itemValue: boolean;

    itemName: string;

}