Developing the pagination for a web page displaying data updated every 2 minutes from an API, I encountered the need to implement custom pagination in order to control how the data is shown. For example, displaying 100 elements per page on page number 5 would show elements ranging 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();
}
Upon clicking the button to navigate to a different page, the methods stop() and start() are invoked, updating the pNum variable with the selected page number. However, upon doing so, I noticed that the data does not immediately load for the newly selected page, but rather updates after the 2-minute interval set by the timer.
I am wondering if there is a way to manually refresh the timer and update the observable parameters?