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:
and the angular-documentation:
but did not find anything.
5 Answers
Open angular dom element schema
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
The list of events you can listen to can be found here
and I believe this one is the same, but better organized (I'm not sure if all are valid)
1Sorry, 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) } 1I 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.
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 ?
4