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 direc

Answer 1

you can always implement this using Subjects like below :

declare a Subject :

customInput : Subject = 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
});