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 click the button multiple times only one request is submitted , anyone knows a clean implementation ? what are the techniques ?

Thanks.

#html code

 <ng-template #editButtons>
      <div class="flex" *ngIf="isEditing">
        <app-page-section-cards-btn
          [btnData]="pageSectionsOptions.btnData.cancel"
          (btnClickEvent)="cancelEdit()"></app-page-section-cards-btn>
        <app-page-section-cards-btn
          [btnData]="pageSectionsOptions.btnData.save"
          (btnClickEvent)="saveDeal()">
      </app-page-section-cards-btn>
      </div>
    </ng-template>

ts code

saveDeal(){
    const payload = {
      "id": 0,
      "name": this.dealDispositionFormFields.dealName,
      "dealType": "Idle Buyout",
      "annualRentProposed": null,
      "annualRentCurrent": null,
      "firmTermRemaining": null,
      "firmTermAdded": null,
      "maxAvailableTerm": null,
      "status": null,
      "capitalContribution": null,
      "parentCloneId": null,
      "accountId": this.currentAccount.accountId,
      "transactionId": this.transactionData.id,
      "dealTypeValues": JSON.stringify(dealTypeValues)
    }
    this.createDispositionDeal(payload);

  }

    createDispositionDeal(payload:any) {
      this._dealService.createDeal(payload)
      .subscribe(
        res=>{
          this._notificationService.showSuccess('Deal was successfully created.');
          if(res.isSuccess){
            this.refreshDealDetailsPage(res.data);
          }  
        },
        err=>{
          console.log('Error creating deal')
        }
      )
    }

CodePudding user response：

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>