Angular input event is not fired by setting the value with the model

Question

I use a input field which calls a method when the value in it changes. But when I set the value in the input field by the ngModel (not typed by hand) the "value changed" event of the input field will not be fired.

Input field:

<div>
  <input type="text" id="orderNumberFilter" (input)="updateOrderNumberFilter($event)" [(ngModel)]="orderNumberFilterValue">
</div>

component:

public updateData(evt: any): void {
  .finally(() => {
    this.orderNumberFilterValue = "test"
  })
  .subscribe(
    //get data from backend
  });
}


public updateOrderNumberFilter(evt: any): void {

 //do stuff with the event

}

Answer 1

And it will not be fired, because input event will be fired only during user interaction.

You can work with Reactive Forms instead of Template Driven Forms and using its valueChanges function you can listen to changes of the value of the controls.

Another answer about Reactive Form value changes you can read here

UPDATED

You can declare your function to get the value of the input

public updateOrderNumberFilter(value: any): void {

}

In the markup attach it with $event.target.value

<input type="text" id="orderNumberFilter" (input)="updateOrderNumberFilter($event.target.value)" [(ngModel)]="orderNumberFilterValue">

and also call it in the finally and pass the value.