Angular - Repeating the same subscribe HTTP request

Sounds like you need switchMap() rxjs operator. Since you haven't posted any code, I can give you some pseudocode to get started.

First, set a # reference to the buttons that do next/back navigation in the pagination. As in

<button (click)="doPaginationStuff()" #backButton></button>

Then, declare a @ViewChild() property in your component class. As in

@ViewChild('backButton') buttonRef: ElementRef;

Then, say on ngOnInit() method, you'd subscribe to the click events to the button. As in

ngOnInit() {
  fromEvent(this.buttonRef.nativeElement, 'click')
     .pipe(switchMap(() => this.http.get('whatever page number'))
     .subscribe(console.log));
}

What this does is, it subscribes to button clicks. Once it receives the first button click, it makes the call to the server to get data for the page number passed in the button click. However, if the user keeps pressing the button before the request fulfills, the previous request is cancelled and a new request is made for the page number passed in the latest click. Let me know if this is not what you are looking for.

I think something like this can solve your problem:

1. assign same class to every paging button. like page-btn

2. In your component, before you call http method, you can disable every button with above class. (you can do it with angular ElementRefor other class.)

3. In the subscribe method, you can re enable paging buttons. (This means after complete http request and update ui data)

With this approach, users can not click on any paging button while data request is pending.