python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

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