Angular 8 Events List

Article By Digamber Rawat Published 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.

DigitalOcean Affiliate

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.

Digamber Rawat
Digamber Rawat

I am a software engineer from India, love to learn and write about latest web and mobile technologies like: MongoDB, Angular 2+, Firebase, Express JS, Python, Node JS, JavaScript, RxJS etc.