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?

Answer 1

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