Angular - Is there list of HostListener-Events?
AngularAngular Problem Overview
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.
Angular Solutions
Solution 1 - Angular
Open angular dom element schema https://github.com/angular/angular/blob/master/packages/compiler/src/schema/dom_element_schema_registry.ts#L78
where:
- (no prefix): property is a string.
*
: 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
Solution 2 - Angular
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)
Solution 3 - Angular
Sorry, I think you ask about a list of properties. You can use e.g.
@HostListener("focus", ["$event.target"])
onFocus(target) {
console.log(target.value)
}
@HostListener("blur", ["$event.target"])
onBlur(target) {
console.log(target.value)
}
@HostListener("input", ["$event.target.value"])
onInput(value) {
console.log(value)
}
Solution 4 - Angular
I wanted an answer showing all the ones like this:
document:keydown.escape
within the context of this kind of snippet in Angular:
import { HostListener} from '@angular/core';
@HostListener('document:keydown.escape', ['$event'])
onKeydownHandler(event: KeyboardEvent) {
}
- This website gave a few examples.
- Here is a more complete list.
- Here is a more generic overview of the alternatives.
Solution 5 - Angular
The change
event is applied to selects.
If you tried with the input
event, and it still doesn't work, then your directive is the issue.
Did you imported / exported it ? Do you have any console errors ? Is another event fired from your directive ?