Event Handling in AngularJS

Types of events in AngularJS

AngularJS is very rich in eventsand has a simple model for how to add event listeners to the HTML. It supports lots of events related to mouse and keyboard. All of these events are applied to an HTML Element. If you have written HTML and AngularJS events simultaneously, then both events will execute, it means an AngularJS event will not overwrite an HTML event. Some of the important events are as follows.
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-blur

Button click event

Let us take one simple example of button click event. We have taken a button control that value is click me. When the Button is clicked, the ButtonClickFunc event handler is called. This handler is defined in Controller named MyController. Inside the ButtonClickFunc event handler, the Message variable is set and its value is displayed in the HTML Div tag. angular.min.js file is available in Scripts folder, so drag this file in head section of HTML file.

Example:Button Click Event

<!DOCTYPE html>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
     </head>
     <body style="font-family:Arial; font-size:medium; color:darkblue">
          <div ng-controller="MyController">
               <h2>Button click event in AnjularJS</h2>
               <input type="button" value="Click Me!" ng-click="ButtonClickFunc()"/>
               <br/>
               <br/>
               <div ng-bind="Message"></div>
          </div>
          <script type="text/javascript">
               var app = angular.module('myModule', [])
                    app.controller('MyController', function ($scope)
                    {
                         $scope.ButtonClickFunc = function ()
                         {
                              $scope.Message = "Button clicked !!."
                         }
                    });
          </script>
     </body>
</html>


Output:
button click event
When the button is clicked by user, a message is displayed.
ng-click directive is responsible for calling the function ButtonClickFunc.

$event – Mouse over event

In AngularJS the event listener directives have an important variable named $event. You can use event as parameter to the event listener function. The $event variable contains the original browser event object. Here is an example of mouse over event.

Example: Mouse Over Event

<!DOCTYPE html>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
     </head>
     <body style="font-family:Arial; font-size:medium; color:darkblue">
          <div ng-controller="myCtrl">
               <h2>Mouse over event in AnjularJS</h2>
               <h2>ng-mousemove="myFunction($event)"> Mouse Over Me!</h2>
               <h2>Coordinates: x={{x}} ,  y=  {{y}}</h2>
          </div>
          <script>
               var app = angular.module('myModule', []);
               app.controller('myCtrl', function ($scope)
               {
                    $scope.myFunction = function (myEvent)
                    {
                         $scope.x = myEvent.clientX;
                         $scope.y = myEvent.clientY;
                    }
               });
          </script>
     </body>
</html>


In this example, when you take the mouse cursor over the heading, the co-ordinate of x and y will be displayed.

Output:
mouse over event
Let us discuss one more complex example to understand the event handling in AngularJS. In this example, there are two button named likes and dislikes. When user clicks on likes or dislikes the count is increased accordingly. To accomplish this task two important directives are used ng-repeat and ng-click.

Please refer the given hierarchy of files and folders.

demo

Example: Event handling using ng-repeat and ng-click.

File Name: Script.js in Scripts folder.

/// <reference path="angular.min.js" />

var myApp = angular.module("myModule", []);
var myController = function ($scope)
{
     $scope.Movies = [
          {
               MovieType: "Holywood Movies", likes: 0, dislikes: 0
          },
          {
               MovieType: "Bolywood Movies", likes: 0, dislikes: 0
          },
          {
               MovieType: "Tolywood Movies", likes: 0, dislikes: 0
          },
          {
               MovieType: "German Movies", likes: 0, dislikes: 0
          }
     ];
     $scope.incrementLikes=function(Mov)
     { Mov.likes++ }
     $scope.incrementDisLikes = function (Mov)
     { Mov.dislikes++ }
};
myApp.controller("myCont", myController);


Code for Demo.htm file.

<!DOCTYPE html>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.min.js"type="text/javascript"></script>
          <script src="Scripts/Script.js"></script>
          <style>
               table, th, td
               {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
               }
               table tr:nth-child(odd)
               {
                    background-color: #ffe6e6;
               }
               table tr:nth-child(even)
               {
                    background-color: #ccffcc;
               }
          </style>
     </head>
     <body style="font-family:Arial; font-size:medium; color:darkblue">
          <div ng-controller="myCont">
               <h2>Event Handling in AngularJS</h2>
               <table border="0">
                    <tr>
                         <th>Movie Type</th>
                         <th>Likes</th>
                         <th>Dislikes</th>
                         <th></th>
                         <th></th>
                    </tr>
                    <tr ng-repeat="movie in Movies">
                         <td>{{movie.MovieType}}</td>
                         <td>{{movie.likes}}</td>
                         <td>{{movie.dislikes}}</td>
                         <td><input type="button" value="Like" ng-click="incrementLikes(movie)"/></td>
                         <td><input type="button" value="Dislike" ng-click="incrementDisLikes(movie)"/></td>
                    </tr>
               </table>
          </div>
     </body>
</html>


Open the HTML file in the browser, you will see the output as given below.
In this example we have created an array with name movies in the controller function. We have also created two function

incrementLikes() and incrementDisLikes(). These two functions are called when you click on like and dislike buttons respectively.

Output:
eventhandling

Keyboard events

There are three important events related to keyboard.
  • Keyup
  • Keydown
  • Keypress

Example: Keyboard events

<!DOCTYPE html>
<html ng-app>
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
     </head>
     <body style="font-family:Arial; font-size: medium; color:darkblue">
          <div>
               <input type="button" value="Click to count" ng-keypress ="count=count+1" ng-init ="count=0"/>
               <br/><br/>
               key press count=: {{count}}
          </div>
     </body>
</html>


Output:
key press event

Focus on the button and press any key from the keyboard, count variable will be increased.
You can use anyone of these event (Keyup, Keydown, Keypress)
▲