Angular - Is there list of HostListener-Events?
Solution 1:
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
Example
Solution 2:
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
Solution 3:
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:
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.