Detect when input value changed in directive

Question

I'm trying to detect when the value of an input changed in a directive. I have the following directive:

    import { ElementRef, Directive, Renderer} from '@angular/core';

    @Directive({
        selector: '[number]',
        host: {"(input)": 'onInputChange($event)'}
    })

    export class Number {

        constructor(private element: ElementRef, private renderer: Renderer){

        }
        onInputChange(event){
            console.log('test');
        }
    }

The problem in this directive is that it detects only when there is an input and not when the value changes programatically. I use reacive form and sometimes I set the value with the patchValue() function. How can I do so the change function gets triggered?

score 86 · Accepted Answer · edited Jun 20 '20 at 09:12

86

You need to make an input property of input and then use the ngOnChanges hook to tell when the input property changes.

@Directive({
    selector: '[number]'
})
export class NumberDirective implements OnChanges {
    @Input() public number: any;
    @Input() public input: any;

    ngOnChanges(changes: SimpleChanges){
      if(changes.input){
        console.log('input changed');
      }
    }
}

Plunkr

Stackblitz

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 18 '17 at 20:25

Teddy Sterne

13,774
2
46
51

1

ngOnChanges(changes : SimpleChanges) – Carlos Bravo Jun 02 '17 at 10:28
1

This requires an input directive, it should use host listener without any dependencies – evanjmg Jan 08 '18 at 15:49

Christian Vincenzo Traina · Answer 2 · 2022-09-02T08:59:10.967

16

There is a better way to detect when an Input property changes, it's considered a best practice and it's also used in the *ngIf implementation.

You just need to postpone the keyword set after Input(), in this way you combine the @Input() decorator with a setter, and it gets called all the times the value changes.

_rows: number;
@Input() set rows(value: number) {
  if (this.value < 0) {
    console.warn('The number of rows must be positive, but got ' + this.value);
    console.warn('Setting default: 2');
    this._rows = 2;
    return;
  }
 
  this._rows = value;
}

If you want to compare the new value with the previous value, you must store the variable in a class property, and retrieve it the second time the method got called:

private previousValue: any = T;

@Input() set myInputName(value: T) {
  console.log(`Previous value was: ${this.previousValue}`);
  console.log(`New value is: ${value}`);
  this.previousValue = value;  
}

edited Sep 02 '22 at 08:59

answered Apr 27 '18 at 00:49

Christian Vincenzo Traina

9,546
2
40
63

You are not answering to the question asked – Mattew Eon Feb 07 '19 at 09:04
1

@MattewEon Wtf? This solves perfectly the problems, since it detects when the input is changed programmatically – Christian Vincenzo Traina Feb 07 '19 at 09:08
1

The goal isn't to add a new `@Input` property to the component, he want to detect the change on the ngModel property – Mattew Eon Feb 07 '19 at 09:28
Good approach using latest Angular 7 @Input style. – SushiGuy Feb 11 '19 at 22:31
1

If the name of the @input variable is the same as the directive, then you can get a watch on the ngModel. e.g. @Input() set number(value: T) {...} Usage example would be – Vdex Sep 10 '20 at 15:48

score 10 · Answer 3 · answered Sep 15 '20 at 18:15

10

As of Angular 9+ I can verify that the snippet below is the correct solution. It's best to avoid ngOnChanges whenever possible for several reasons and use the correct host listener event instead. The below example will get the current input value on keyup. You can easily customize this code snippet for whatever you need on an input directive.

  @Directive({
      selector: '[appMyDirective]',
  })
  export class MyDirective {
    // Add whatever event you want to track here
    @HostListener('keyup', ['$event']) public onKeyup(event: KeyboardEvent): void {
      const value = (event.target as HTMLInputElement).value;
      console.log(value);
    }
  }

answered Sep 15 '20 at 18:15

Ash Blue

5,344
5
30
36

This works well, just remember that HostListener will trigger a change detection, whether or not you're actually handling the event / changing anything. This might impact performance and still applies even if all components use ChangeDetectionStrategy.OnPush. – mitschmidt Jan 10 '21 at 10:02
This only captures on keyup events, not programmatically updating the input value. – steve Jun 24 '22 at 19:22

score 4 · Answer 4 · answered Jun 16 '17 at 10:41

4

You can also use HostListener. For more information about HostListener, you can go through this link. Here is the code.

import {Directive, ElementRef, HostListener} from '@angular/core';


@Directive({
       selector: '[number]'
 })

export class NumberDirective {

    @Input() public number: any;
    @Input() public input: any;

    constructor(private el: ElementRef) {}

    @HostListener('change') ngOnChanges() {
        console.log('test');
    }

}

answered Jun 16 '17 at 10:41

Tushar Ghosh

942
1
12
18

5

'change' not work, 'mouseenter', 'mouseleave' from angular sample work. Please, test your answers. – bmi Jul 11 '18 at 13:03
4

'change' works for select menus, at least (as does 'ngModelChange', and you can get the new value by injecting the `$event` var: `@HostListener('ngModelChange', ['$event']) public doStuff(value) { ... }`) – mopo922 Mar 26 '19 at 19:50

score 0 · Answer 5 · answered Jul 12 '23 at 17:34

To listen to value changes of an input in Angular, use the HostListener decorator in a directive:

@Directive({
  selector: '[appYourDirective]'
})
export class YourDirective {

  constructor(private el: ElementRef) {
  }

  @HostListener('input') logChange() {
    console.log(this.el.nativeElement.value);
  }
}

Detect when input value changed in directive

5 Answers5

Plunkr

Stackblitz

Linked