Angular - Is there list of HostListener-Events?

Question

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

Answer 1

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) {

  }

1. This website gave a few examples.
2. Here is a more complete list.
3. Here is a more generic overview of the alternatives.

Answer 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

Answer 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)

  }

Answer 4

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 ?

Answer 5

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