In this tutorial. I am going to tell about Angular Js Events. Angular Js is rich in creating event-driven application.  Angular js has the full support of such directive to provide custom behavior on various DOM events such as click, dbclick, and mouseenter etc.

After completing this tutorial you will be able to understand:

  • Events in Angular Js.

Angular Js Events:

Angular js enable us to create an event-driven application. Angular js has the full support of such directive to provide custom behavior on various DOM events such as click, dbclick, and mouseenter etc.

Angular Js Events

Following is the list Angular Js Event directives

  • 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

Example of ng-click event:

<!DOCTYPE html>

<html >

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app="myApp">

    <div ng-controller="myController">

        Enter Your Name: <input type="text" ng-model="name" /> <br />

           

        <button ng-click="Greeting(name)">Say Hello</button

    </div>

    <script>

        var myApp = angular.module('myApp', []);

       

        myApp.controller("myController", function ($scope, $window) {

           

            $scope.Greeting = function (name) {

                $window.alert(name)

            }

        });

    </script>

</body>

</html>

In the above example, the ng-click directive is used to call Greeting() with a parameter name. A name is model property defined using ng-model directive. The Greeting function is attached to a $scope object in myController.It is accessible from button click because as button click comes under myController.

The $window is used to display the alert.

You can see the demo of ng-click directive here

Example of ng-mouseover event

<!DOCTYPE html>

<html >

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body >

   <div ng-app="myApp" ng-controller="myCtrl">




<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>




<p>Coordinates: {{x + ', ' + y}}</p>




</div>

    <script>

     var myapp = angular.module('myApp', []);

myapp.controller('myCtrl', function($scope) {

    $scope.myFunc = function(myE) {

        $scope.x = myE.clientX;

        $scope.y = myE.clientY;

    }

});

    </script>

</body>

</html>

You can see the demo for ng-mouseover here.

View More:

Conclusion:

I hope you understand this tutorial about Angular Js Events. I would appreciate your feedback Comments and suggestions.

Thank You.

Leave a Comment