KendoUI Angular2 - Debounce slider

Question

I would like to update a model when the slider change event is triggered + a debounce time (in order to not stressing too much the layout, since that model is going to be used in a massive chart refreshed every 250ms).

This is the scenario:

HTML

    <kendo-slider [min]="1" 
                  [max]="5" 
                  [(ngModel)]="model" 
                  (valueChange)="functionToBeDebounced($event)">
    </kendo-slider>

TS

 public functionToBeDebounced(value) {
        this.model = value;
        this.notification.emit(this.model);
 }

Is it possible to do something like this?

    <kendo-slider [min]="1" 
                  [max]="5" 
                  [(ngModel)]="model" 
                  (valueChange)="functionToBeDebounced($event)"
                  [debounce]="500" >
    </kendo-slider>

The result would be calling functionToBeDebounced only when the sliding is over.

Answer 1

You can use rxjs/Subject to debounce everything you want.

import { Subject } from 'rxjs/Subject';

---

private debouncer: Subject<any> = new Subject();

ngOnInit(){
  this.debouncer.debounceTime(500).subscribe(event => {
    this.functionToBeDebounced(event);
  });
}

private callDebouncer(event){
  this.debouncer.next(event);
}

---

(valueChange)="callDebouncer($event)"