Home > Blog > Tutorials > Angular Tutorial for Beginners – Learn AngularJs from Scratch [Updated] > Angular Events – The Complete Guide

Angular Events – The Complete Guide

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:

Video Thumbnail

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

Angular JS Expert

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:

Video Thumbnail

Output
o17

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.

About the Author

Kislay
Kislay
Technical Research Analyst - Full Stack Development

Kislay is a Technical Research Analyst and Full Stack Developer with expertise in crafting Mobile applications from inception to deployment. Proficient in Android development, IOS development, HTML, CSS, JavaScript, React, Angular, MySQL, and MongoDB, he’s committed to enhancing user experiences through intuitive websites and advanced mobile applications.