CODEWITHSUNDEEP
angularngmodel
user1879901
user1879901

Reputation:

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

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

Upvotes: 15

Views: 21454

Answers (4)

Tiaan Le Grange
Tiaan Le Grange

Reputation: 51

Lots of solutions using setTimeout(), but this will cause the function to be called each time the model changes, a simple way to prevent this is to clear the timeout first

e.g.

timeOut;
timeOutDuration = 1000;

update_fields(data) {
  clearTimeout(this.timeOut);
  this.timeOut = setTimeout(() => {
     //do something
  }, this.timeOutDuration);
}

this will only call the function once after the last update is made and the timeOutDuration has elapsed

Upvotes: 3

vangras
vangras

Reputation: 173

Answer by Fredrik Lundin updated for Angular 6:

Template:

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

Component:

import ......

import { Subject, EMPTY } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

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

  term$ = new Subject<string>();

  private searchSubscription: Subscription;

  constructor() {
    this.searchSubscription = this.term$.pipe(
      debounceTime(1000),
      distinctUntilChanged(),
      switchMap(term => {
        /*do something*/
        return EMPTY;
      })
    ).subscribe();
  }

  ngOnDestroy() {
    //remember to unsubscribe on destroy

    if (this.searchSubscription) {
      this.searchSubscription.unsubscribe();
      this.searchSubscription = null;
    }
  }
}

Upvotes: 15

Fredrik Lundin Grande
Fredrik Lundin Grande

Reputation: 8186

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

Upvotes: 32

Rahul Singh
Rahul Singh

Reputation: 19632

update_fields(){

  this.service.yourTask(){
    .subscribe(data => {
      setTimeout(()=>{ //your task }, 4000)
    }    
  }
}


someFunction() {
    setTimeout(() => /* code to execute */, 3000)
}

Upvotes: 0

Related Questions