Angular 8 Events List

By Digamber Rawat Last updated on

Angular 8 Events List

In this tutorial, i am going to share with you a must have Angular 8 Events List. Angular makes event handling easy with its various event types. This Angular 8 events list will allow you to perform certain tasks when you scroll, click, hover, submit and focus in real-world Angular 8 app. Angular 8 provides every kind of event types to deal with the specific situation.

Angular 8 Event List

# Angular 8 Events Cheet-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 8 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.

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

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Hire Me