AngularJS Event – List of HTML Event Directives & Event Handling

The last session was all about AngularJS dependency Injection. Today, we will learn what is AngularJS Event. Here, we will cover all the HTML event directives with syntax and examples. Last but not the list, we will study how events handle in angularJS.

AngularJS Event - List of HTML Event Directives

What is AngularJS Event?

When require some advance feature, to create an angular application (advanced) like a mouse click, keyboard presses, changes events, moves etc. The advance application focuses on handling DOM events in AngularJS. It provides a model to add an event listener in the HTML part.

HTML Event Directives used in AngularJS Event

There are certain directives available in angularJS to provide custom behavior to Dom Elements such as:

  • ng-blur
  • ng-change
  • ng-click
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup

1. ng-click

The ng-click directive consists of that particular code when the element will click, it will execute.

For example, we can use the ng-click event in AngularJS, when we click a button to display an alert box.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
</script>
</head>
<body ng-app="myapp" >
<h1>AngularJS ng-click </h1>
    <div ng-controller="mycontroller">
       Enter Name: <input type="text" ng-model="text" /> <br /><br />
          <button ng-click="Display(text)">Show Message</button
</div>
<script>
    var x = angular.module('myapp', []);
    x.controller("mycontroller", function ($scope, $window) {
        $scope.Display = function (v) {
                                   alert(v)
         }
      });
    </script>
</body>

Output:

AngularJS ng-click

Enter Name:

Show Message

Code Explanation

Do you know How to create AngularJS Modules?

When the user clicks on the button show message it will show an alert box displaying the text user entered in the text box corresponding to Enter Name field.

In the above code, we can see Display() function attach with $scope object in mycontroller, so it will be accessible from button click only. As button control is inside mycontroller.

Note – We can use $window service to display an alert.

2. ng-dblclick

The directive ng-dblclick in AngularJS invokes whenever an element with which ng-dblclick is attached is double-clicked. Angular JS will not override the element’s original

On dblclick event, both are executed consecutively.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<p>Double-click the text Welcome:</p>
<h1 ng-dblclick="x =x + 1" ng-init="x=0">Welcome</h1>
<p>The text has been double-clicked {{x}} times.</p>
<p> The count of the variable "x" increases every time when you double-click the text.</p>
</body>
</html>

Output:

Double-click the text Welcome:

Welcome

The text has been double-clicked 2 times.

The count of the variable “x” increases every time when you double-click the text.

3. ng-focus

This directive will execute the particular code when the user focuses on the element with which the ng-focus directive is attached.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="" ng-init="x=0">
<input ng-focus="x = x + 1" />
<h1>{{x}}</h1>
<p>The value of the variable "x" increases every time the input field gets focus.</p>
</body>
</html>

Output:

1

The value of the variable “x” increases every time the input field gets focus.

Recommended reading – ng-view in AngularJS

4. ng-blur

This directive will execute the particular code when a user loses focuses from the element with which ng-blur directive attach.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<input ng-blur="x = x + 1" ng-init="x=0" />
<h1>{{x}}</h1>
<p>The value of the variable "x" increases every time the input field loses focus.</p>
</body>
</html>

Output:

1

The value of the variable “x” increases every time the input field loses focus.

5. mouse events

It occurs when the control of cursor moves over an element or an element is clicked by mouse event.

The order of mouse event when the cursor moves over an element is:

  • ng-mouseover
  • ng-mouseenter
  • ng-mousemove
  • ng-mouseleave

The order of mouse event when the mouse clicks on an element

  • ng-mousedown
  • ng-mouseup
  • ng-click
<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
   <style>
     .pinkDiv {
         width: 100px;
         height: 70px;
         background-color: pink;
         padding:2px 2px 2px 2px;
       }
      .lightblueDiv {
           width: 120px;
           height: 100px;
           background-color: lightblue;
           padding:2px 2px 2px 2px;
      }
    </style>
</head>
<body ng-app="">
<h1>AngularJS Mouse Events </h1>
    <div ng-class="{pinkDiv: enter, lightblueDiv: leave}" ng- mouseenter="enter=true;leave=false;" ng-mouseleave="leave=true;enter=false">
     Mouse <span ng-show="enter">Enter Color changes to pink</span> <span ng-show="leave">Leave color changes to lightblue</<meta http-equiv="content-type" content="text html; charset="utf-8"">span</meta http-equiv="content-type" content="text>>
    </div>
</body>
</html>

In the above example, the ng-class directive includes a map of CSS classes, so pinkDiv will be applied if enter=true and lighblueDiv will be applied if leave=true.

The ng-mouseenter directive sets ‘enter’ to true, which will apply pinkDiv class to the <div> element. In the same way, ng-mouseleave will set leave to true, which will apply lightblueDiv class.

Have a Look – Latest Career Opportunities in AngularJS

6. $event

When calling the function it can be passed as an argument. It contains the browser’s event object.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myapp" ng-controller="myctrl">
<h1 ng-mousemove="myFunc($event)">Take Mouse Over Me!</h1>
<p>Coordinates are: {{x+ ', ' + y}}</p>
</div>
<script>
var p = angular.module('myapp', []);
p.controller('myctrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
}
});
</script>
<p>The value of clientA and clientB from the event object is displayed whenever mouse is handed over heading "Take Mouse Over Me!".</p>
</body>
</html>

Output:

Take Mouse Over Me!

Coordinates are: 73, 59

The value of clientX and clientY from the event object display whenever a mouse will hand over heading “Take Mouse Over Me!”.

Follow this link to know more about AngularJS Controller

The value of coordinates will get change every time, whenever the mouse is headed over the heading.

Custom Event Directives

Using a combination of basic events, angular provides a way to create our own events which are custom events.

AngularJS Event Handling

When we will create an advance angularJS application, we require advanced features for that. Therefore, it requires handling of DOM elements like keyboard press, various mouse clicks etc. AngularJS Events can be handled from within directive itself by using the link function. The directive is allowed to attach itself to the DOM elements by the link in an HTML page.

Syntax-

link: function ($scope, element, attributes)

Link is a function that accepts three parameters in it and they are:

  • Scope
  • The element with which directive associated
  • Attributes of the target element
<!DOCTYPE html>
<html>
<head>
   <meta chrset="UTF 8">
   <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div ng-app="DemoEvent">
   <div ng-link="">Click Here</div>
</div>

<script type="text/javascript">
    
    var demo = angular.module('DemoEvent',[]);
    demo.directive('ngLink',function(){
       return {

           link:function($scope,ele,attrs) {
               ele.bind('click',function () {
                  ele.html('You clicked here');
                 });}
             }});
</script>
</body>
</html>

Output:

Click Here

When you click on the text click here the result will be:

You Clicked here

Let’s revise – What is AngularJS HTML DOM?

Conclusion

Hence from the above article, we can conclude that event is an action, execute as a result of another source or action such as mouse click. AngularJS provides its own HTML Event Directives such as ng-click, ng-blur, ng-focus etc. We can attach these event directives with HTML elements to perform various functionality.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.