AngularJS Events


WHAT:

When we talk about event handling that include mouse events and keyboard events like on click, ondoubleclick , on key press etc etc. And for every advance application where user interact with application, there we require event handling.


Angular Events:

ng-Click

ng-click directive allow you to click the html element and on clicking this element, you can perform some functionality or can perform any type of calculation according to the need.
Let's understand with a very simple example for ng-click directive.


Ng-Click-Without-Function Example
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <button ng-click="count=count+1" ng-init="count=0">Click It</button>
        <div>
            Count is :{{count}}
        </div>
    </div>
</body>
</html>

Output


In the example, on the button click we increment the value of count by 1 and set the initial value zero with the help of ng-init directive and in the div element we print the value of {{ count }}, each time when you click on the button the value of count variable increment by 1.

We can also execute function with the help of ng-click directive. Let's understand with an example.


Ng-Click-With-Function Example
<!DOCTYPE html>
<html lang="en-US">
<head>
 <title>Welcome in the Angular JS</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
  <div ng-controller="sampleController">
    <button ng-click="incrementCount()">Click It</button>
      <div>
        Count is :{{count}}
      </div>
  </div>
<script> 
  var app = angular.module("sampleApplication", []); 
  app.controller("sampleController", function($scope) { 
    $scope.count=0;
    $scope.incrementCount = function (){
      $scope.count += 1;
    }; 
  }); 
</script>  
</body>
</html>

Output


In this example the ng-click directive calls the function incrementCount() and in the function we increment the value of count variable by one each time when the funcation calls. You can do whatever you want in this function according to the requirments.


ng-dblclick

ng-dblclick directive allow you to double click the html element and on double click this element you can perform some function or can do any type of calculation according to the need. Let's understand simple example for ng-dblclick directive.


Ng-Double-Click Example
<!DOCTYPE html>
<html lang="en-US">
<head>
 <title>Welcome in the Angular JS</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
  <div ng-controller="sampleController">
    <button ng-dblclick="incrementCount()">Click It</button>
      <div>
        Count is :{{count}}
      </div>
  </div>
<script> 
  var app = angular.module("sampleApplication", []); 
  app.controller("sampleController", function($scope) { 
    $scope.count=0;
    $scope.incrementCount = function (){
      $scope.count += 1;
    }; 
  }); 
</script> 
</body>
</html>

Output


ng-keypress

The ng-keypress event of Angular JS allow you to define your custom behavior on the keypress event.


ng-keydown

The ng-keydown event of Angular JS allow you to define your custom behavior on the keydown event.


ng-keyup

The ng-keyup event of Angular JS allow you to define your custom behavior on the keyup event. Lets see the example of ng-keypress,ng-keydown and ng-keyup events.


Ng-Keypress-Down-Up Example
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <div>
            Increment on Key Press :<input ng-keypress="count1=count1+1" ng-init="count1=0" />
            Count is :{{count1}}
        </div>
        <div>
            Increment on Key down :<input ng-keydown="count2=count2+1" ng-init="count2=0" />
            Count is :{{count2}}
        </div>
        <div>
            Increment on Key up :<input ng-keyup="count3=count3+1" ng-init="count3=0" />
            Count is :{{count3}}
        </div>
    </div>
</body>
</html>

Output


The ng-keypress event increase the value of {{ count1 }} by 1 each time when we press the key inside first input. The initial value of {{ count1 }} is Zero. Same for the second ng-keydown it increase the value of {{ count2 }} by 1 each time when key goes down in the second input. In the third green box ng-keyup event increase the value of {{ count3 }} by 1 each time when the key is up. For the Angular JS events Event Object as $event is available for keyCode , altKey etc. We can also perform functions instead of evaluate expressions on these events.


ng-mousedown

The ng-mousedown event of Angular JS allow you to define your custom behavior on the mouse down event. Let's understand with an example.


Ng-Mousedown Example
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <button ng-mousedown="count=count+1" ng-init="count=0">Mouse Down to increment</button>
        Count is :{{count}}
    </div>
</body>
</html>

Output


ng-mouseup

The ng-mouseup event of Angular JS allow you to define your custom behavior on the mouse up event. Let's understand with an example.


Ng-Mouseup Example
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <button ng-mouseup="count=count+1" ng-init="count=0">Mouse Up to increment</button>
        Count is :{{count}}
    </div>
</body>
</html>

Output


ng-mouseover

The ng-mouseover event of Angular JS allow you to define your custom behavior on the mouse over event. This event is execute when mouse is on the element on which we define this event. Let's try with an example.


Ng-Mouseover Example
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <button ng-mouseover="count=count+1" ng-init="count=0">Mouse Over to increment</button>
        Count is :{{count}}
    </div>
</body>
</html>

Output


ng-mouseenter

The ng-mouseenter event of Angular JS allow you to define your custom behavior on the mouse enter event. Let's try with an example.


Ng-Mouseenter Example
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <button ng-mouseenter="count=count+1" ng-init="count=0">Enter Mouse to increment</button>
        Count is :{{count}}
    </div>
</body>
</html>

Output


ng-mouseleave

The ng-mouseleave event of Angular JS allow you to define your custom behavior on the mouse leave event. Let's try with an example.


Ng-Mouseleave Example
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <button ng-mouseleave="count=count+1" ng-init="count=0">Leave Mouse to increment</button>
        Count is :{{count}}
    </div>
</body>
</html>

Output


ng-mousemove

The ng-mousemove event of Angular JS allow you to define your custom behavior on the mouse move event. The event execute when you move mouse on the element on which we define this event. Let's try with an example.


Ng-Mousemove Example
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <button ng-mousemove="count=count+1" ng-init="count=0">Move Mouse to increment</button>
        Count is :{{count}}
    </div>
</body>
</html>

Output


ng-blur

The ng-blur directive executes the expression when the element lost focus. Let's try with an example.


Ng-Blur Example
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <input type="text" ng-blur="count=count+1" ng-init="count=0" />
        Count is :{{count}}
    </div>
</body>
</html>

Output