In this video we are going to learn about Event binding.
When a user interacts with an application in the form of a keyboard typing, a mouse click, or a mouseover, it generates an event.
These events need to be handled to perform some kind of action.
This is where event binding comes into picture.
So lets see how can we do event binding.
First of all lets see the click event.
Switch to the project and inside the project open app.component.html file and her just add a button.

<button>Increase One</button> 

Now go to app.component.ts file and here add a property and also create a function.

count = 0; 
increementByOne() 
{ 
    return num++; 
}

Now add this function to the button.
So go to the app.component.html and here just write.

<button (click) = \"increementByOne()\" >Click Me</button> 

Now lets display the count value.
So just write here.

<h1>{{count}}</h1> 

Alright now lets check it.
So switch to the browser and now click on button.
and here you can see the number is increasing by one.
Now lets see the mousemove event.
So go to the app.component.html and just create a div here.

<div (mousemove) = \"increementByOne()\" style=\"background:blueviolet;height:200px;width: 200px;\"> </div>

Now add the event mousemove and call the increementByOne.
Now lets check it.
Now move mouse on this div.
And here you can see the number is increasing by one.
Now lets see the change event.
For that just create a select.

<select name=\"color\"> 
    <option value=\"Red\">Red</option> 
    <option value=\"Blue\">Blue</option> 
    <option value=\"Green\">Green</option> 
    <option value=\"Orange\">Orange</option> 
</select> 

Now create a function inside the app.component.ts.

color='';
changeColor(color) 
{ 
  this.color=color; 
}

Now add this function to the select.

<select name=\"color\" (change)=\"changeColor($event.target.value)\"> 

Now just print the selected color so just write here.

<h1>Selected Color : {{color}}</h1> 

Now lets check this.
So go to the browser and just change the color.
And here you can see the selected color.
If select green selected color green.
Now let see the keyDown event.
So go to the app.component.html and here just add input field.

<input type=\"text\" /> 

Now create a function for handeling the keydown event.

text = ''; 
handleKeydown(text) 
{ 
    this.text=text; 
}

Now add this event to the text box.

<input type=\"text\" (keydown) = \"handleKeydown($event.target.value)\" /> 

Now display the text

<h1>Text : {{text}}</h1> 

Now lets check it.
So switch to browser and here just.
Type inside the text field you can see here the the typed text.
So in this way you can bind the event.