Angular2- delay in ngModelChange

Question

What is the best way to add an delay for a ngModelChangeproperty binding?

Example: I want to call a function in an input field:

<input [ngModel]="model" (ngModelChange)="func()">

The model update on every input change.

Was func() just called, it should, although the model was changed, be possible to call func() again only after for example 3 seconds.

Answer 1

I would leverage a control to do that:

<input [ngModel]="model" [ngFormControl]="ctrl">

and leverage the valueChanges property this way:

constructor() {
  this.ctrl = new Control();
  this.ctrl.valueChanges.delay(3000).subscribe((value) => {
    this.func();
  });

This issue in Github could also interest you:

• https://github.com/angular/angular/issues/6895