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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions