In an event binding, Angular sets up an event
handler for the target event.
Example looks like -
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
+ ' | ';
}
}
Example
2 – 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?';
}
}