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
Stayed Informed –
Angular 4 and Angular 5 Study docs
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!!