Angular 4, How to update [(ngModel)] with a delay of 1 seconds

Question

Since ngModel is updating instantly how to put a delay.

  <input type="text" value="{{item.task_name}}" name="task_name" [(ngModel)]="item.task_name" (ngModelChange)="update_fields([item.task_name])" >

I need to save the task_name with a delay of one seconds by calling update_fields() , To avoid instant calls to service.

Thanks

Answer 1

Rxjs and Observables are the perfect candidate for this type of task! Here is an example of how it can be achieved:

Template:

<input type="text" [value]="item.task_name"(keyup)="term$.next($event.target.value)">

Component:

import ......

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component{(
  ...
)}
export class YourComponent {

  term$ = new Subject<string>();

  constructor() {
    this.term$
      .debounceTime(1000)
      .distinctUntilChanged()
      .switchMap(term => /*do something*/);
  }
}

subject is a type of object that acts both as an observable and observer - meaning you can both subscribe to it and emit values from it (with next())!

debounceTime waits for the provided time in ms until it allows for new changes

distinctUntilChanges will not allow the same input to pass through two times in a row

switchMap takes the latest observable from the chain so you don't get multiple results at once