Angular 6+ HostListener on numeric input side arrows selector?

Question

i am facing an issue where i have a directive sitting on an input type=number, those with side arrows for selecting numbers up and down.

I am using HostListener but I can't find a way to target the specific event when the user clicks on the side arrows.

So far I have tried:

@HostListener(change'): does not work at all

@HostListener('ngModelChange'): cause an infinite loop when the user uses the keyboard after

@HostListener('click'): It's the only one the works but the event does not contain the input value as it is a generic click event.

@HostListener('input'): Only works when the users input a number using the keyboard

Does anyone know the official way of getting this event?

 @HostListener('input', ['$event'])
  onEvent(event) {
    this._propagateTouch();
    this._propagateChange(event.target.value);
    // console.log('input');
  }

  @HostListener('click', ['$event'])
  onChange(event) {
    this._propagateTouch();
    this._propagateChange(event);
    console.log('arrow change');
  }

  @HostListener('keydown', ['$event'])
  handleKeyboardEvent(event) {
    this._propagateTouch();
    this._propagateChange(event.target.value);
  }

the click event on the spinners(arrows) is just a generic mouse event and does not contain "target.value" but you are right in the sense that somehow I am now getting the value in the parent component — FraPetIm

nayakam nayakam · Accepted Answer · 2018-12-19T04:58:24

Angular executes provided /configured method for HostListener when the element emits the configured event. There are two events change and input available for input https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

For input when user click on side up or down arrow event get fired for @HostListener("input", ["$event"]). Demo

  @HostListener("input", ["$event"])
    public onInput(event: any): void {
        console.log("input:"+ event);
        alert(event);
    }

 @HostListener("input", ["$event.target"])
    public onInput(event: any): void {
        console.log("input:"+ event);
        alert(event);
    }

Angular 6+ HostListener on numeric input side arrows selector?

1 Answers