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

Ayaan Alam
Ayaan Alam
Software Developer | Technical Research Analyst Lead | Full Stack & Cloud Systems

Ayaan Alam is a skilled Software Developer and Technical Research Analyst Lead with 2 years of professional experience in Java, Python, and C++. With expertise in full-stack development, system design, and cloud computing, he consistently delivers high-quality, scalable solutions. Known for producing accurate and insightful technical content, Ayaan contributes valuable knowledge to the developer community.