how to prevent clicking more than once on a button in angular 12.

Question

Hii

I'm facing one problem while saving the data. what actually happening is like on save button , if i click at the same time for multiple times (e.g Double click or more) then my data is getting saved more than once.

How can i prevent saving data for multiple time by preventing button click for more than once.

here is my code.....

<button type="button" id="btnSaveCharges" [disabled]="isInProgress"
class="btn btn-sm bg-primary hover-transform" (click)="save(false);>Save
</button>

 

save(param) {
this.isInProgress = true;

// code for saving the data into multiple tables 

this.isInProgress = false;   // after successfull save set this.isInProgress = false
}

any  help would be appretiated.

thank you.