67

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.

yurzui
  • 205,937
  • 32
  • 433
  • 399
Tobias Gassmann
  • 11,399
  • 15
  • 58
  • 92

5 Answers5

56

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 *

enter image description here

@HostListener(and also (customEvent)="handler()") can also listen to custom events

Example

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • THANK YOU FOR THIS ANSWER! Your stackblitz link is a goldmine of information as I'm learning HostListener and customer attribute directives now. Seeing a custom event is a huge help in bringing these concepts together for me personally. – jason Nov 27 '18 at 20:30
  • Not a useful answer really, unless you are keen to read all /* comments */. The question was on the list, not tricky workarounds. – Wojciech Marciniak May 19 '21 at 10:35
29

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

Kacper Wolkowski
  • 1,517
  • 1
  • 16
  • 24
14

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)

  }
Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • This is a large part of the solution. If you're not using the element itself you would do better to set the event this way! Thanks. – Ben Racicot Jun 22 '19 at 16:56
5

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.
JGFMK
  • 8,425
  • 4
  • 58
  • 92
2

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 ?

  • 1
    just dom events. You have a list e.g. in https://www.w3schools.com/jsref/dom_obj_event.asp (remove the "on" and you have all) – Eliseo Dec 12 '17 at 12:10
  • oninput is a DOM event ... I mean, could you try using a click event for sintance, and see if your code triggers ? This would tell us if the issue is with the directive, or the event –  Dec 12 '17 at 12:11
  • from oninput -->@HostListener('input',[$event]) – Eliseo Dec 12 '17 at 12:34
  • Yeah thank you, I'm aware of the events. Would you mind actually answer the question, and tell me if the HostListener used with click works in your directive, or not ? –  Dec 12 '17 at 14:24