Angular Events List Cheatsheet Tutorial

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.