Post
Ask Question

Events In AngularJS

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.         }  
  13.   
  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>  
  3.   
  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>  
  42.   
  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">    
  45.     
  46. <option value="">--Select Name--</option>    
  47.     
  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>  
  54.   
  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.             }  
  13.   
  14.         });  
  15.         app.controller('MyCtrl1', function ($scope) {  
  16.             $scope.getkeys = function (event) {  
  17.                 $scope.keyval = event.keyCode;  
  18.             }  
  19.   
  20.         });  
  21.         app.controller('MyCtrl2', function ($scope) {  
  22.             $scope.getkeys = function (event) {  
  23.                 $scope.keyval = event.keyCode;  
  24.             }  
  25.   
  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
Next Recommended Reading Event And Two-Way Binding In Angular 5