11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/

Event Handling in AngularJs.

While making more progressed AngularJS applications, eventually your application should handle DOM events like mouse clicks, moves, keyboard presses, change events etc. AngularJS has a basic model for how to add event listeners members to the HTML you create from your perspectives. This content will clarify this model.
For Video session visit:Event handling
Event Handling flow
Event Handling Flow chart
Event Listener Directives in AngularJs:-
 You can  use an event listener to an HTML element using one of the AngularJS event  listener  directives:-
  1. ng-click
  2. ng-dbl-click
  3. ng-mousedown
  4. ng-mouseup
  5. ng-mouseenter
  6. ng-mouseleave
  7. ng-mousemove
  8. ng-mouseover
  9. ng-keydown
  10. ng-keyup
  11. ng-keypress
  12. ng-change
Basic event listener directive example in AngularJs:-

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Myctrl" >
<div ng-click="Data.dataClick ()">Submit</div>
</div>
<script>
angular.module("app", [])
.controller("myctrl", function($scope) {
$scope.Data = {};
$scope.Data.dataClick = function() {
alert("clicked on button!!");
}
} );
</script>
</body> 
</html>

Description:-
    When you tap the internal div of the above illustration, the "Data.dataClick()" function will called. As should be obvious in the controller functions , the "Data" object has a "dataClick()" functions added to it.

As should be obvious, joining events to HTML DOM components is very little not the same as creating the HTML in any case. The event listener functions called are functions added to the "$scope" object by the controller functions .

parameterized($event) event listener directive example in AngularJs:-
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myctrl" >
<div ng-click="Data.dataClick($event)">Submit</div>
</div>
<script>
angular.module("app", [])
.controller("myctrl", function($scope) {
$scope.Data = {};
$scope.Data.dataClick = function(event) {
alert("clicked Event : " + event.clientX + ", " + event.clientY);
}
} );
</script>
</body> 
</html>
parameterized($event,item) event listener directive example in AngularJs:-

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myctrl" >
<ul>
<li ng-repeat="item in Data.items"
ng-click="Data.dataClick(item, $event)">Submit</li>
</ul>
</div>
<script>
angular.module("app", [])
.controller("myctrl", function($scope) {
$scope.Data = {};
$scope.Data.items = [{ v: "1"}, { v: "2"}, { v : "3"} ];
$scope.Data.dataClick = function(item, event) {
alert("clicked Event: " + item.v + " @ " + event.clientX + ": " + event.clientY);
}
} );
</script>
</body> 

</html>

Description:-
   In this example iterates through a list of "items" data, generates li elements from them, and adds click listeners to each li html  element. Along with the call to the click listener is passed the item JavaScript object the li  html element was generated based on, along with the click event object "($event)".


You have just read an article that categorized by title AngularJs by title Event Handling in AngularJs.. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/03/part-15event-handling-in-angularjs.html. Thank You!
Author: Bikesh Srivastava - Monday, March 14, 2016

7 comments to "Event Handling in AngularJs."

  1. Thank you.Well it was nice post and very helpful information on
    AngularJS5 Online Training

    ReplyDelete
  2. You rock particularly for the high caliber and results-arranged offer assistance. I won't reconsider to embrace your blog entry to anyone who needs and needs bolster about this region. We are providing angularJs training in velchery.
    for more details:AngularJs training in chennai

    ReplyDelete
  3. You have written an informative post. Looking forward to read more.
    Responsive Website Design Services

    ReplyDelete
  4. I like your post very much. It is very useful for my research. I hope you can share more info about this. Keep posting mule 4 certification
    servicenow developer Certification
    Workday training
    Workday financial training
    Workday HCM Online training

    ReplyDelete
  5. Thank you for sharing this informative post. Looking forward to read more.
    Responsive Web Design Services

    ReplyDelete

Life Is Complicated, But Now programmer Can Keep It Simple.