Angular Prevent User Multiple Submit

Sometimes user click the save button multiple times and it queues and submit a lot of request and multiple data are created. How do we prevent it on the front-end that even user cl

Solution 1:

there is a perfect solution using rxjs exhaustMap but You can simply disable your button during the processing of your call and enable it again when the reponse comes

isLoading = false;

saveDeal() {
 this.isLoading = true;
 ...
}


createDispositionDeal(payload:any) {
  this._dealService.createDeal(payload)
  .subscribe(
    res=>{
      this.isLoading = false; // here
      ...
    },
    err=>{
      this.isLoading = false; // here
      ...
    }
  )
}

and add a new input to your component [disabled]="isLoading"

 <app-page-section-cards-btn
      [disabled]="isLoading"
      [btnData]="pageSectionsOptions.btnData.save"
      (btnClickEvent)="saveDeal()">
  </app-page-section-cards-btn>