[Fixed] Detect when input value changed in directive


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';

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

    export class Number {

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


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?


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

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

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



Leave a Reply

(*) Required, Your email will not be published