Menu
I am using a hostlistener in a directive to detect "blur"- and "keyup"-events. Now I need to detect changes in the input-element the directive sits on. I tried
@HostListener('change', ['$event'])
but it does not fire.
Is there a "change"-event? I have also read, that there should be an "input"-event, but that does not fire either.
So, my question is: Is there a list of available events that I can use?
I have searched google:
https://www.google.de/search?q=angular+2+list+of+hostlistener+events
and the angular-documentation:
https://angular.io/api/core/HostListener
but did not find anything.
210
@HostListener is Angular's decorator method that's used for listening to DOM events on the host element of both component and attribute directives. @HostListener sets the listeners once the directive is initialized and removes them automatically once the directive gets destroyed.
Introduction. @HostBinding and @HostListener are two decorators in Angular that can be really useful in custom directives. @HostBinding lets you set properties on the element or component that hosts the directive, and @HostListener lets you listen for events on the host element or component.
We apply the directive on a host element ( p in the example) as shown below. Whenever the mouse is moved over the p element, the mouseover event is captured by the HostListener. It runs the onMouseOver method which we have attached to it. This method adds a green border to the p element using the HostBinding.
The ngOn directive adds an event listener to a DOM element via angular. element(). on(), and evaluates an expression when the event is fired.
Open angular dom element schema https://github.com/angular/angular/blob/master/packages/compiler/src/schema/dom_element_schema_registry.ts#L78
where:
*: property represents an event.!: property is a boolean.#: property is a number.%: property is an object.Then press ctrl+F and write *
@HostListener(and also (customEvent)="handler()") can also listen to custom events
Example
56
The list of events you can listen to can be found here
https://www.w3schools.com/jsref/dom_obj_event.asp
and I believe this one is the same, but better organized (I'm not sure if all are valid)
https://developer.mozilla.org/en-US/docs/Web/Events
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
