how to change options in the timeout

options: Options = {
  floor: 0,
  ceil: 0
}
setTimeout(()=>{
  this.options.ceil = 300; // i want to change it later
})

I did not understand even by looking at the document.

[piotrdz]

Apologies for not replying earlier. I was on holiday with limited internet access. I hope that you found a solution for your problem.

In this case, it’s due to how Angular change detection works on objects. It won’t pick up the change to the nested value, because it does a quick and dirty comparison of object identity. However, there is a workaround, which is to re-create the object:

setTimeout(() => {
  const newOptions = Object.assign({}, this.options);
  newOptions.ceil = 300;
  this.options = newOptions;
});

[AdrienHorgnies]

Here is the setup I used if it can be of any use:

        <ng5-slider (userChange)="onFilterFormChanges()" [(highValue)]="filters.priceMax.value"
                    [(value)]="filters.priceMin.value" [options]="{
        floor: minPrice | async,
        ceil: maxPrice | async,
        step: 10,
        translate: sliderText
    }"></ng5-slider>

    ngOnInit() {
        this.minPrice = this.spaceService.minPrice().pipe(
            tap(value => this.filters.priceMin.value = value),
            startWith(20)
        );
        this.maxPrice = this.spaceService.maxPrice().pipe(
            tap(value => this.filters.priceMax.value = value),
            startWith(2900)
        );
    }

I couldn’t get rid of a null pointer exception without the startWith and I need the tap as I use double binding with another member of the class.

That is the cleanest solution that suited my flow. This way I must not unsubscribe myself and I can nicely handled any event using a single EventEmitter which I subscribe with the component holding the result list of my search query. full code