Skip to main content

Since Angular2 the (eventName)=”expression” binding syntax allows to subscribe to any known and unknown event.

This basically means that you can use DOM events directly but take in mind that you can also add custom ones by defining them with the EventEmitter class.

Below you’ll find a list of available event bindings for elements in Angular2.

// General events
(focus)="yourMethod($event)"
(blur)="yourMethod($event)" 
(submit)="yourMethod($event)"  
(scroll)="yourMethod($event)"

// Keyboard events
(keydown)="yourMethod($event)"
(keypress)="yourMethod($event)"
(keyup)="yourMethod($event)"

// Mouse events
(mouseenter)="yourMethod($event)"
(mousedown)="yourMethod($event)"
(mouseup)="yourMethod($event)"

// Click events
(click)="yourMethod($event)"
(dblclick)="yourMethod($event)"

// Drag events
(drag)="yourMethod($event)"
(dragover)="yourMethod($event)"
(drop)="yourMethod($event)"

// Other events
(cut)="yourMethod($event)"
(copy)="yourMethod($event)"
(paste)="yourMethod($event)"

In the following post you can find more info about the Event Emitters and how you can create your own.

Sebastián Becerra

Trabajo con tecnologías web en arquitecturas Cloud. Me gusta descubrir y aprender nuevas tecnologías en Layouts (CSS, Sass, Less), Frameworks de Desarrollo (JQuery, AngularJS, Ionic) y plataformas Web (Wordpress, Joomla, Prestashop). He colaborado con diferentes proyectos de software libre y código abierto con fines sociales. Además participé en distintos eventos TI exponiendo sobre comunidades y educando sobre tecnologías Web.

Leave a Reply