Introduction
In my previous articles I told you about:
This article explains the ng-keyup and ng-keydown directives of AngularJS.
ng-keyup occurs when the key is released after it has been pressed but ng-keydown occurs when the key is pressed, it will not wait for it to come up, so for key up you need to press it every time you need to trigger it but key down will continue to work until you reelase the key after pressing it.
Step 1
You need to first add the external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or can download my source code and then can fetch it or you can click on this link and download it: ANGULARJS.
After downloading the External File you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now first I will show you the key down event, for this you need to add this code in the body section of your application:
<body>
<form id="form1" runat="server">
<div>
<input ng-keydown="increment = increment + 1" ng-init="increment=0">
key down increment: {{increment}}
</div>
</form>
</body>
Here I had initialized the TextBox by a default value of 0, this TextBox is also bound to the key down event, in other words this initial value will be incremented by one on each click.
After this the increment is bound with a text that will help to determine the number of increments made.
Now our application is created and we can check it.
Output
On running the application you will get an output like this one:
![key up and down event in angularjs]()
Here you can see that by default zero is displayed in the number of key down events.
But as I press a key for a long time you can see that the Click Counter is also increasing at a great speed:
![key up and down event in angularjs]()
Step 3
Now I will work on the Key Up Event, for this you need to modify your code with this one:
<input ng-keyup="upincrement = upincrement + 1" ng-init="upincrement=0">
key up increment: {{upincrement}}
Here once again a click counter is created but this time it will work on key up, every time a key is releaswed this counter will increase it's value by one.
Let's run the application and see the output
Output
As we had seen in key down, first the counter will be at zero.
![key up and down event in angularjs]()
Now I am pressing a key and will not leave it for a few milliseconds, let's see what will happen.
![key up and down event in angularjs]()
You can see that the counter is incremented by 1 only when I leave the key after pressing it.
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input ng-keydown="increment = increment + 1" ng-init="increment=0">
key down increment: {{increment}}
<br />
<br />
<input ng-keyup="upincrement = upincrement + 1" ng-init="upincrement=0">
key up increment: {{upincrement}}
</div>
</form>
</body>
</html>