Angular Events List Cheatsheet Tutorial

Last Updated on by in Angular

In this tutorial, i am going to share with you a must have Angular Events List. Angular makes event handling easy with its various event types.

This Angular events list will allow you to perform certain tasks when you scroll, click, hover, submit and focus in real-world Angular app. Angular provides every kind of event types to deal with the specific situation.

Angular 16 Events List CheatSheet

# Angular Events Cheat-sheet
(drag)="myFunction()"
(drop)="myFunction()"
(dragover)="myFunction()"

(blur)="someFunction()"  
(focus)="someFunction()" 

(scroll)="someFunction()"

(submit)="someFunction()"

(click)="someFunction()"      
(dblclick)="someFunction()"   

(cut)="someFunction()"
(copy)="someFunction()"
(paste)="someFunction()"

(keyup)="someFunction()"
(keypress)="someFunction()"
(keydown)="someFunction()"

(mouseup)="someFunction()"
(mousedown)="someFunction()"
(mouseenter)="someFunction()"

Angular 12 Click Event Demo

Let’s create a function and bind it to click event.

Go to your app.component.html file and paste the following code.

<button (click)="someFunction()">Click Here</button>

Go to your app.component.ts file and paste the following code.

someFunction(event) {
  console.log('Hi There!');
}

Check out this detailed blog on DOM Events by Mozilla.org.

Angular 13 Events List

I hope you like this Angular events list tutorial. Please share this tutorial with others.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.