Debouncetime in Angular6 ngModelChange

Question

I have a complex calculator app written in Angular6 which calculates the results based of several inputs in the ngModelChange event and to show these results in charts directly. The calculation is done server side. Now I want to add a debouncetime, so the server dont receive a request with every key pressed.

My calculation method which is fires in the ngModelChange looks like this:

async calculate(){
 if(this.checkInputs()){
   try{
     let returnDto = await this.webApiService.calculate(new CalculatorInputDto(this.model)).toPromise();
     this.outputCalculate.emit(returnDto);
   }
   catch(e){
     console.log(e);
   }
}

And my service method:

calculate(dto: CalculatorInputDto): Observable<any> {
 let url = this.baseUrl + "calculate";
 return this.http.post(url, JSON.stringify(dto), this.options)
    .pipe(
        debounceTime(5000),
        map((res => res.json())),
        catchError(error => this.handleError(error))
     );
}

As you can see I already tried the debounceTime(5000) in my service but it seems like nothing has changed.

Does anyone have an idea how I can solve this problem?

you need `debounceTime` in your `keypress` subscription, not here — dee zg, Aug 10 '18 at 06:11
Check this: https://stackoverflow.com/questions/50275945/how-to-implement-a-debounce-time-in-keyup-event-in-angular-6 — Sujata Chanda, Aug 10 '18 at 06:36

score 21 · Accepted Answer · edited Mar 03 '19 at 16:10

you can always implement this using Subjects like below :

declare a Subject :

customInput : Subject<string> = new Subject();

in your template :

(ngModelChange)='inputValueChanged($event)'

So now listent to the event :

  inputValueChanged(event){
      this.customInput.next(event);
  }

You'll have to subscribe to your Subject in the below way :

this.customInput.debounceTime(300).distinctUntilChanged().subscribe(value =>{
       //value will have your input
    });

(with this your code will look neat and clean and also organised )

Edit : With rxjs >= v6 ,

Complete example can be found here

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


this.customInput.pipe(debounceTime(300),distinctUntilChanged()).subscribe(value =>{
 //value will have your input
});

score 0 · Answer 2 · answered Aug 10 '18 at 13:17

I solved this for now with help of this question: debounceTime & distinctUntilChanged in angular 6

So I created a Viewchild for Every Input and placed them in an array. And in the ngAfterViewInit I call this method:

setInputEvent() {
 let inputArray = this.fillViewChildsInArray();
 for (let element of inputArray) {
    this.input$ = fromEvent(element.nativeElement, 'input')
    .pipe(
       debounceTime(1000),
       map((e: KeyboardEvent) => e.target['value'])
     );
     this.input$.subscribe((val: string) => {
      this.calculate();
     });
   }
}

Debouncetime in Angular6 ngModelChange

2 Answers2

Linked