angular 4 event binding

žHandling of user input events using component class is called event handling.

žEvent Names are enclosed in parenthesis(“()”).

žDifferent Types of Events

https://developer.mozilla.org/en-US/docs/Web/Events

In This tutorial Example you will see .

žHow to handle DOM events.

žHow to use $event object

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

@Component({
  selector: 'app-root',
template: `
<button (click)=myevent()>Call Event</button>
<p>{{count}}</p>
<input type='text' (keyup)=callmethod($event) />
<input type='text' #txt2 (keyup)=getdata(txt2.value) />

<p>{{data}}</p>
`

})
export class AppComponent {
count = 0;
data = '';
myevent()
{
  ++this.count;
}
callmethod(event)
{
  this.data += event.target.value + "|";
}
getdata(val)
{
  this.data = val;
}
}