Event Handler in AngularJS

Angular JS provide the event handler in HTML, which we can use to do operation, there are following event which is provide by the Angular JS

 AngularJS Events

You can add AngularJS event listeners to your HTML elements by using one or more of these directives:
  Ø  ng-blur
  Ø  ng-change
  Ø  ng-click
  Ø  ng-copy
  Ø  ng-cut
  Ø  ng-dblclick
  Ø  ng-focus
  Ø  ng-keydown
  Ø  ng-keypress
  Ø  ng-keyup
  Ø  ng-mousedown
  Ø  ng-mouseenter
  Ø  ng-mouseleave
  Ø  ng-mousemove
  Ø  ng-mouseover
  Ø  ng-mouseup
  Ø  ng-paste
The event directives allows us to run AngularJS functions at certain user events.
An AngularJS event will not overwrite an HTML event, both events will be executed.
Mouse Events
Mouse events occur when the cursor moves over an element, in this order:
Ø  ng-mouseenter
Ø  ng-mouseover
Ø  ng-mousemove
Ø  ng-mouseleave
Or when a mouse button is clicked on an element, in this order:
Ø  ng-mousedown
Ø  ng-mouseup
Ø  ng-click
You can add mouse events on any HTML element.
Some Angular JS event we will here with an example
Ng-Click Directive
The ng-click directive defines AngularJS code that will be executed when the element is being clicked.
1.   Go to the visual studio and add a project and right click on the solution and add a script file and give it name as “Controller.js” and write the following code to this file

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

var Myapp = angular
            .module("MyModule", [])
            .controller("myController", function ($scope) {

                var technologies = [
                    { name: "C#", likes: 0, dislikes: 0 },
                    { name: "ASP.NET", likes: 0, dislikes: 0 },
                    { name: "SQL", likes: 0, dislikes: 0 },
                    { name: "AngularJS", likes: 0, dislikes: 0 }
                ];

                $scope.technologies = technologies;

                $scope.incrementLikes = function (technology) {
                    technology.likes++;
                };

                $scope.incrementDislikes = function (technology) {
                    technology.dislikes++;
                };
            });


2.   Now add a HTML file to your solution and give it name as “Index.html” and write the following code to this file
<!doctype html>
<html ng-app="MyModule">

<head>
  
    <script src="Scripts/angular.min.js"></script>   
    <script src="Scripts/Controller.js"></script>

</head>
<body>
    <div ng-controller="myController">
      <table  border="1" >
            <thead>
                <tr>
                 <th>Name</th>
                    <th>Likes</th>
                    <th>Dislikes</th>
                    <th>Like/Dislike</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="technology in technologies">
                    <td> {{ technology.name }} </td>
                    <td style="text-align:center"> {{ technology.likes }} </td>
                    <td style="text-align:center"> {{ technology.dislikes }} </td>
                    <td>
                        <input type="button" ng-click="incrementLikes(technology)" value="Like" />
                        <input type="button" ng-click="incrementDislikes(technology)" value="Dislike" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Index.html : Notice in the html below, we are associating incrementLikes() and incrementDislikes() functions with the respective button. When any of these buttons are clicked, the corresponsing technology object is automatically passed to the function, and the likes or dislikes property is incremented depending on which button is clicked.

When you will run application output will be like following
                            

ng-mousemove directive

Increase the count variable when the mouse moves over the button. Controller class will be the same , there will be a little change in the Index.html,
Replace the ng-click with the ng-mousemove and see the output, when you will take mouse on the button increment and decrement will happen for respective button.

Index.html code

<!doctype html>
<html ng-app="MyModule">

<head>
  
    <script src="Scripts/angular.min.js"></script>   
    <script src="Scripts/Controller.js"></script>

</head>
<body>
    <div ng-controller="myController">
      <table  border="1" >
            <thead>
                <tr>
                 <th>Name</th>
                    <th>Likes</th>
                    <th>Dislikes</th>
                    <th>Like/Dislike</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="technology in technologies">
                    <td> {{ technology.name }} </td>
                    <td style="text-align:center"> {{ technology.likes }} </td>
                    <td style="text-align:center"> {{ technology.dislikes }} </td>
                    <td>
                        <input type="button" ng-mousemove ="incrementLikes(technology)" value="Like" />
                        <input type="button" ng-mousemove="incrementDislikes(technology)" value="Dislike" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>


Ng-show directive

If you want to show a section of HTML code when a button is clicked, and hide when the button is clicked again, like a dropdown menu, make the button behave like a toggle switch:

Controller.JS Code
/// <  reference path="angular.min.js" />

var Myapp = angular
            .module("MyModule", [])
            .controller("myController", function ($scope) {

                $scope.showMe = false;

                $scope.myFunc = function () {
                    $scope.showMe = !$scope.showMe;
                }
            });

Index.HTML codes
<!doctype html>
<html ng-app="MyModule">

<head>

    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Controller.js"></script>

</head>
<body>
    <div ng-controller="myController">
        <button ng-click="myFunc()">Click</button>

        <div ng-show="showMe">
            <h1>Technologies:</h1>
            <div>C#</div>
            <div>Asp.net</div>
            <div>Angular JS</div>
        </div>
    </div>
     <p>Click the button to show/hide the menu.</p> </body>
</html>


Now run your application and click on button and see the output

                
The showMe variable starts out as the Boolean value false.
The myFunc function sets the showMe variable to the opposite of what it is, by using the ! (not) operator.
Ng-Hide
Just opposite of ng-show this ng-hide work, in above example (ng-show example) replace the ng-show with the ng-hide and see the output