CODEWITHSUNDEEP
javascriptangulartypescriptrxjs
alexvloure
alexvloure

Reputation: 23

How to manually refresh a rxjs timer and update parameters of the observable?

I'm making the pagination of a web that shows data updated every 2 minutes from an API (the API is paginated but I need to do my own pagination to show the data as I want, example: 100 elements per page, page number 5, that would show elements from 401 to 500).

private readonly _start = new Subject<void>();
private readonly _stop = new Subject<void>();
lista : any = [];
pNum = 1;
act = timer(0, 120000);

constructor(private ListaService:ListaService) {
 this.act.subscribe(() => {
  this.ListaService.getLista(this.pNum,'usd').pipe(
    takeUntil(this._stop),
    repeatWhen(() => this._start)
  ).subscribe(resp=>{
    this.lista = resp
  });
 })
}

start(): void {
 document.body.scrollTop = 0;
 this._start.next();
}
stop(): void {
 this._stop.next();
}

So the thing is, when I click the button to change the page, the methods stop() and start() are called, and also the variable pNum is updated with the number of the page selected. I thought that doing this would load the data of the page selected but it's not happening, the data updates 2 minutes after I click the page number when the timer triggers.

Is there any way to manually refresh the timer and update the parameters of the observable?

Upvotes: 2

Views: 1179

Answers (1)

Aviad P.
Aviad P.

Reputation: 32629

Yes, modify your act to include a source for "manual" updates, thus:

manual$ = new Subject<void>();
act = merge(timer(0, 120000), this.manual$)

Then whenever you need a manual update, call next on manual$ thus:

this.manual$.next();

EDIT

While we're at it, don't nest subscribe calls - use a flattening operator (switchMap is suitable in this case), thus:

 this.act
   .pipe(switchMap(_ => this.ListaService.getLista(this.pNum,'usd')))
   .subscribe(resp => this.lista = resp);

See stackblitz for demo.

Upvotes: 1

Related Questions