Angular 4 Events Binding

Angular 4 Events Binding - Click Events and Actions

A click, mouse hover and keyboard actions are all events and you can use to call component logic within Angular 4 apps.

Angular 4 event binding looks like
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'on-click',
  template: '<div> <button (click)="onClick()">Click me!</button>{{message}} </div>'
})
export class OnClickComponent {
  message = "";

  onClick() {
    this.message = 'Hey, How are You?';
  }
}


Types of Event Binding in Angular 4 –
1.      click
2.      dblclick
3.      submit
4.      mouse enter
5.      mouse down
6.      mouse up
7.      key down
8.      keypress
9.      key up
10.   cut
11.   copy
12.   paste
13.   scroll
14.   blur
15.   drag
16.   drag over
17.   drop

Examples – dblclick Event
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'on-click',
  template: '<div> <button (dblclick)="onDblClick()">Click me!</button>{{message}} </div>'
})
export class OnDblClickComponent {
  message = "";

  onDblClick() {
    this.message = 'Hey, How are You?';
  }
}


Examples – dblclick mouse down
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'on-click',
  template: '<div> <button (mousedown)="onMousedown()"> onMousedown here.</button>{{message}} </div>'
})
export class onMousedownComponent {
  message = "";

  onMousedown() {
    this.message = 'Hey, How are You?';
  }
}


Examples – dblclick keypress
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'on-click',
  template: '<div> <button (keypress)="OnKeypress()"> keypress here.</button>{{message}} </div>'
})
export class KeypressComponent {
  message = "";

  OnKeypress() {
    this.message = 'Hey, How are You?';
  }
}


Examples – dblclick keyup
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'on-click',
  template: '<div> <button (keyup)="OnKeyup()"> keyup here.</button>{{message}} </div>'
})
export class keyupComponent {
  message = "";

  Onkeyup() {
    this.message = 'Hey, How are You?';
  }
}


Actions of Event Binding –
In an event binding, Angular sets up an event handler for the target event.

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

@Component({
  selector: 'on-click',
  template: `<div>
        <div><button (click)="onClick($event)"> keyup here.</button> <p>{{message}}</p></div>
        <div><input (keyup)="onKey($event)"> <p>{{values}}</p></div>  </div>`
})
export class clickComponent {
  values = '';

  onClick(event) {
    console.log(event);
  }

  onKey(event: any) {
    //without type info
    this.values += event.target.value + ' | ';
  }
}

I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular 4 Events Binding - Click Events and Actions Angular 4 Events Binding - Click Events and Actions Reviewed by Anil Singh on 3:13 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^