One of my challenges is dealing with multiple button clicks that trigger HTTP requests and receive data from the server. I'm looking for a way to prevent users from clicking the button again until the previous request is complete.
I found a solution using the exhaustMap operator from the RXJS library, but it only works on the first click. Subsequent clicks after the HTTP request has completed (whether successful or with an error) do not have any effect.
How can I overcome this issue?
HTML
<button #rescheduleButton type="button" class="btn btn-primary">
Get Data
</button>
TYPESCRIPT
@ViewChild('rescheduleButton', {static: false}) rescheduleButton: ElementRef;
clicks$: Observable<any>;
public ngAfterViewInit() {
const button = this.rescheduleButton.nativeElement;
this.clicks$ = fromEvent(button, 'click');
this.clicks$.pipe(
exhaustMap(() => this.slotService.getAllAvailableSlots())
).subscribe((slots) => {
console.log(slots, 'slots');
})}