What are Angular Events?
AngularJS Provides a number of events that are associated with the HTML controls. Events in AngularJS are as follows:
1. Mouse Events
2. Keyboard Events
3. Change Events
Full Stack Web Development Course Video:
1. Mouse Events in Angular
AngularJS provides a way to bind event handlers for these events. It includes following events.
- ng-click
- ng-dblclick
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
e.g.
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>Total Number of Clicks: {{ ClickCount }}</p>
<button ng-click = "ClickCount = ClickCount + 1">Click Me!</button>
<p>Total Number of Double Clicks: {{ ClickCount1 }}</p>
<button ng-dblclick= "ClickCount1 = ClickCount1 + 1">Click Me!</button>
</div>
</body>
</html>
Watch this What is Angular 8 video:
Output
Want to be ready for a Job? Check out our blog on Angular Interview Questions!
2. Keyboard Events in Angular
It includes following events –
- ng-keydown
- ng-keyup
- ng-keypress
3. Change Events in Angular
If you need to know when an input element state alters due to user interaction you can use the ng-change.
If you want to learn about Angular Modules, refer to our Angular blog!