Useful List of Angular 13 Event Types for Event Binding

Last Updated on by in Angular

Angular 13 Event Types

I am going to share with you a useful list of Angular 13 Event Types for Event Binding. Angular offers plenty of event types to communicate with your app. Events in Angular helps you to trigger an action on specific condition like click, scroll, hover, focus, submit etc.

Events allow you to trigger your component’s logic within your Angular app.

List of Angular 13 Event Types for Event Binding

// Full list of Angular Events
(click)="myFunction()"      
(dblclick)="myFunction()"   
(submit)="myFunction()"
(blur)="myFunction()"  
(focus)="myFunction()" 
(scroll)="myFunction()"
(cut)="myFunction()"
(copy)="myFunction()"
(paste)="myFunction()"
(keyup)="myFunction()"
(keypress)="myFunction()"
(keydown)="myFunction()"
(mouseup)="myFunction()"
(mousedown)="myFunction()"
(mouseenter)="myFunction()"
(drag)="myFunction()"
(drop)="myFunction()"
(dragover)="myFunction()"

Example of Angular Click Event

Let’s create a demo for event binding, in this small demo we will trigger a function to show text on the console by clicking on a button in Angular app using (click)="myFunction()" method.

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

<button (click)="myFunction()">Click Me</button>

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

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // (click)="myFunction()" event trigger this function on click
  myFunction(event) {
    console.log('Hello World');
  }
}

Please find this detailed article on DOM Events by Mozilla.org.

Age calculator tool

🎂✨ Discover your age in detail and with countdown to your next birthday with fun facts! 🎈🎉

Calculate your age now!
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.