Wednesday, April 22, 2020

Angular Event Binding With Examples

In Angular one-way bindings like property binding, attribute binding flow is from Component to template but Angular event binding goes the other direction from template to component. Event binding allows you to listen and respond to certain events such as keystrokes, mouse movements, clicks, and touches sent by the host elements.

Angular event binding

Syntax of Angular event binding

Even binding is denoted by round brackets () and the syntax is as given below.

(event name) = "event handler expression/method"

Angular event binding syntax consists of a target event name within parentheses on the left of an equal sign, and a template statement with in quotes on the right.

For example-

Angular event binding syntax

Here event binding listens for the button's click events, calling the component's onSave() method whenever button is clicked.

Angular Even binding examples

1. First example shows how to disable a button after it is clicked. It uses both property and event binding. A boolean flag is bound to the “disabled” property of the button, when button is clicked using click event a method is called which toggled the boolean flag.

Component (Typescript code)

import { 
  Component
 } from '@angular/core';
import { User } from './user.model';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  flag : boolean = false;
  // toggle the flag
  onButtonClick(){
    this.flag = !this.flag;
  }
}

Template (HTML file)

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <label for="name" class="col-form-label">Name:</label>
      <input class="form-control" placeholder="Enter name" id="name">        
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-md-12">
      <button class="btn btn-primary" (click)="onButtonClick()" [disabled]="flag">Submit</button>
    </div>
  </div>
</div>

In the button element, click event is bound to a method onButtonClick(). When the button is clicked onButtonClick() method is called on the component which toggles the boolean flag field. Initially value of flag is false thus in the method it becomes true.

2. Binding with input event of input element to get the value of input field.

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <label for="name" class="col-form-label">Name:</label>
      <input type="text" class="form-control" (input)="updateUserName($event)" id="name">            
    </div>
    <p>{{ userName }}</p>
  </div>
</div>

In the input element, input event is bound to a method updateUserName and $event is passed as an argument. $event denotes the data emitted with the event.

Component

import { 
  Component
 } from '@angular/core';
import { User } from './user.model';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  userName : String;
  updateUserName(event : Event){
    this.userName = (event.target as HTMLInputElement).value;
  }
}

In the component there is a userName property, value from the passed $event argument is extracted in the method updateUserName() and assigned to the userName.

3. Using the mouseover event to display the selected item. In the example User records are displayed in a table and the user name over which mouse pointer is hovering is displayed in the separate <div> section using the mouseover event.

User Model class

export class User {
  name : string;
  age : number;
  joinDate : Date;
  constructor(name: string, age : number, joinDate : Date) {
    this.name = name;
    this.age = age;
    this.joinDate  = joinDate;
  }
}

Component

import { 
    Component
 } from '@angular/core';
import { User } from './user.model';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  users: User[];
  userName : String;
  constructor(){
    // Adding User instances to users array
    this.users = [new User('Jack', 56, new Date('2005-03-25')),
    new User('Lisa', 32, new Date('2012-05-09')),
    new User('Jayesh', 28, new Date('2014-10-21'))] ;
  }
}

Template

<div class="container">
  <div class="bg-warning my-4">
    Selected User: {{userName || '(None)'}}
  </div>
  <table class="table table-sm table-bordered m-t-4">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Joining Date</th>
    </tr>
    <tr *ngFor="let user of users">
      <td (mouseover)="userName=user.name">{{user.name}}</td>
      <td>{{user.age}}</td>
      <td>{{user.joinDate | date:'dd/MM/yyyy'}}</td>
    </tr>
  </table>
</div>

In the table (mouseover) event is used with the <td> element.

Build the example and run it, initial display should be as given below.

Angular even binding example

With mouse over selection.

That's all for this topic Angular Event Binding With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page


Related Topics

  1. Angular Two-Way Data Binding With Examples
  2. Angular One-Way Data Binding Using String Interpolation
  3. Angular Class Binding With Examples
  4. Angular Custom Property Binding Using @Input Decorator
  5. Angular Custom Event Binding Using @Output Decorator

You may also like-

  1. Angular Example to Render Multiple Rows
  2. Angular Application Bootstrap Process
  3. Angular Project Structure With File Description
  4. Angular ngSwitch Directive With Examples
  5. Shallow Copy And Deep Copy in Java Object Cloning
  6. String Pool in Java
  7. How to Fix The Target Type of This Expression Must be a Functional Interface Error
  8. Spring Boot Hello World Web Application Example