AngularJS includes certain directives which can be used to provide custom behavior on various DOM events, such as click, dblclick etc.

Let’s take a look at some of the important event directives of AngularJS.

ng-click

The ng-click directive is used to provide an event handler for click event.
  1. <!DOCTYPE html>
  2. <html ng-app="mainApp">
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  5. <title></title>
  6. <meta charset="utf-8" />
  7. <script>
  8. var mainApp = angular.module("mainApp", []);
  9. mainApp.controller("appController", function ($scope) {
  10. $scope.btn_click = function(name){
  11. alert(name);
  12. }
  13. });
  14. </script>
  15. </head>
  16. <body ng-controller="appController">
  17. Enter your name : <input type="text" ng-model="name" />
  18. <input type="button" value="click me" ng-click="btn_click(name)" />
  19. </body>
  20. </html>

Output

Angular

ng-dblclick (Double Click)

The ng-dblclick directive is used to provide an event handler for a double-click event.

In this example, we will use the same example which we’ve used for ng-click. The only difference is that we are going to use ng-dblclick instead of using ng-click. It also means that the below code will only work if user hits double click.

  1. <!DOCTYPE html>
  2. <html ng-app="mainApp">
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  5. <title></title>
  6. <meta charset="utf-8" />
  7. <script>
  8. var mainApp = angular.module("mainApp", []);
  9. mainApp.controller("appController", function ($scope) {
  10. $scope.dblbtn_click = function (name) {
  11. alert(name);
  12. }
  13. });
  14. </script>
  15. </head>
  16. <body ng-controller="appController">
  17. Enter your name : <input type="text" ng-model="name" />
  18. <input type="button" value="click me" ng-dblclick="dblbtn_click(name)" />
  19. </body>
  20. </html>

Output
Angular
ng-mouseenter and ng-mouseleave

In the below example, the ng-class directive includes map of the CSS classes, so GreenDiv will be applied if enter=true and RedDiv will applied if leave=false.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  5. <style>
  6. .GreenDiv {
  7. width: 100px;
  8. height: 100px;
  9. background-color: green;
  10. border-radius: 2px 2px 2px 2px;
  11. padding: 2px 2px 2px 2px;
  12. }
  14. .RedDiv {
  15. width: 100px;
  16. height: 100px;
  17. background-color: red;
  18. border-radius: 2px 2px 2px 2px;
  19. padding: 2px 2px 2px 2px;
  20. }
  21. </style>
  22. </head>
  23. <body ng-app>
  24. <div ng-class="{RedDiv: enter, GreenDiv: leave}" ng-mouseenter="enter=true;leave=false;" ng-mouseleave="leave=true;enter=false">
  25. Mouse <span ng-show="enter">Enter</span> <span ng-show="leave">Leave</span>
  26. </div>
  27. </body>
  28. </html>

Output

Angular

ng-change (mouse event)

The below example demonstrates how to use ng-change event on a drop-down list change event.

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <title> </title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  7. <script type="text/javascript">
  8. var app = angular.module('myApp', []);
  9. app.controller('MyCtrl', function($scope) {
  10. $scope.arrlist = [{
  11. "userid": 1,
  12. "name": "Tim"
  13. }, {
  14. "userid": 2,
  15. "name": "Riya"
  16. }, {
  17. "userid": 3,
  18. "name": "Sam"
  19. }];
  20. $scope.getdetails = function() {
  21. if ($scope.userselected.userid == "1") {
  22. $scope.result = true;
  23. $scope.result1 = false;
  24. $scope.result2 = false;
  25. } else if ($scope.userselected.userid == "2") {
  26. $scope.result = false;
  27. $scope.result1 = true;
  28. $scope.result2 = false;
  29. } else if ($scope.userselected.userid == "3") {
  30. $scope.result = false;
  31. $scope.result1 = false;
  32. $scope.result2 = true;
  33. } else {
  34. $scope.result = false;
  35. $scope.result1 = false;
  36. $scope.result2 = false;
  37. }
  38. }
  39. });
  40. </script>
  41. </head>
  43. <body>
  44. <div ng-app="myApp" ng-controller="MyCtrl"> <select name="users" ng-options="user.name for user in arrlist" ng-change="getdetails()" ng-model="userselected">
  46. <option value="">--Select Name--</option>
  48. </select><br /><br />
  49. <div style="padding:10px; border:1px solid red; width:30%; font-weight:bold" ng-show='result'>Hello Tim</div>
  50. <div style="padding:10px; border:1px solid yellow; width:30%; font-weight:bold" ng-show='result1'>Hello Riya</div>
  51. <div style="padding:10px; border:1px solid green; width:30%; font-weight:bold" ng-show='result2'>Hello Sam</div>
  52. </div>
  53. </body>
  55. </html>
Output

Angular

ng-mousemove (mouse event)

The following example demonstrates how to use ng- mousemove event.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>
  5. </title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  7. <script type="text/javascript">
  8. var app = angular.module('myApp', []);
  9. app.controller('MyCtrl', function ($scope) {
  10. $scope.count = 0;
  11. $scope.getdetails = function () {
  12. $scope.count = $scope.count + 1;
  13. }
  14. });
  15. </script>
  16. </head>
  17. <body>
  18. <div ng-app="myApp" ng-controller="MyCtrl">
  19. <div style="padding:10px; border:1px solid black; background-color:aqua; width:200px; height:100px; cursor:pointer;" ng-mousemove="getdetails()">Move Mouse Cursor Here</div><br /><br />
  20. <span style="color:Red; margin-top:25px;">Number of Times Mouse Move Event Fired: {{count}}</span>
  21. </div>
  22. </body>
  23. </html>

Output

Angular

ng-keydown, ng-keyup and ng-keypress (mouse event)

The below example demonstrates how to use ngkey-down, ngkeyup, and ng-keypress events.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>
  5. </title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  7. <script type="text/javascript">
  8. var app = angular.module('myApp', []);
  9. app.controller('MyCtrl', function ($scope) {
  10. $scope.getkeys = function (event) {
  11. $scope.keyval = event.keyCode;
  12. }
  14. });
  15. app.controller('MyCtrl1', function ($scope) {
  16. $scope.getkeys = function (event) {
  17. $scope.keyval = event.keyCode;
  18. }
  20. });
  21. app.controller('MyCtrl2', function ($scope) {
  22. $scope.getkeys = function (event) {
  23. $scope.keyval = event.keyCode;
  24. }
  26. });
  27. </script>
  28. </head>
  29. <body ng-app="myApp" ng-controller="MyCtrl">
  30. <div ng-controller="MyCtrl">
  31. <h3>ng-keydown</h3>
  32. Enter any text: <input type="text" ng-keydown="getkeys($event)" ng-model="txt"><br /><br />
  33. <span style="color:green">Last Key Code: {{keyval}}</span>
  34. </div>
  35. <hr />
  36. <div ng-controller="MyCtrl">
  37. <h3>ng-keyup</h3>
  38. Enter any text: <input type="text" ng-keyup="getkeys($event)" ng-model="txt"><br /><br />
  39. <span style="color:red">Last Key Code: {{keyval}}</span>
  40. </div>
  41. <hr />
  42. <div ng-controller="MyCtrl2">
  43. <h3>ng-keypress</h3>
  44. Enter any text: <input type="text" ng-keypress="getkeys($event)" ng-model="txt"><br /><br />
  45. <span style="color:yellowgreen">Last Key Code: {{keyval}}</span>
  46. </div>
  47. </body>
  48. </html>

Output

Angular