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?

Answer 1

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
});