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.

Rajesh Gami · Answer

See the below example In your HTML template event )> In your component (Typescript) // count the clicks private clickTimeout = null ; public getItem(itemId: string): void { if ( this .clickTimeout) { this .setClickTimeout(() => {}); } else { // if timeout doesn't exist, we know it's first click // treat as single click until further notice this .setClickTimeout((itemId) => this .handleSingleClick(itemId)); } } // sets the click timeout and takes a callback // for what operations you want to complete when // the click timeout completes public setClickTimeout(callback) { // clear any existing timeout clearTimeout( this .clickTimeout); this .clickTimeout = setTimeout(() => { this .clickTimeout = null ; callback(); }, 200); } public handleSingleClick(itemId: string) { //The actual action that should be performed on click this .itemStorage.get(itemId); }

Sachin Singh · Answer

It means you are doing something wrong. The rule is:- after saving data, all your controls (TextBox, DropDown etc) should be empty automatically. So, on next save , the validations should pop up and the request should not enter to your save logic. Solution:- 1. Make sure all your controls have proper validations which fire on button click (Save). 2. If validation succeed then data gets saved and all controls gets refresh (empty).

Rijwan Ansari · Answer

You should know the javascript is async functions. So using loader or progress, we need take care async part. If you are using API/service call then hide loader in API response. example: this .isInProgress = true ; $.ajax({ url: uri, cache: false , success: function (html){ //other code this .isInProgress = false ; }, complete: function (){ this .isInProgress = false ; } });

Akshay · Answer

Ok I will do that. thank you

Janarthanan Selvaraj · Answer

Submit TypeScript Code import { Component } from '@angular/core'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { isButtonDisabled = false; handleButtonClick() { this.isButtonDisabled = true; // Perform your button click logic here // If you want to re-enable the button after a specific duration, you can use setTimeout: setTimeout(() => { this.isButtonDisabled = false; }, 3000); // Re-enable after 3 seconds (adjust the duration as per your requirement) } } In the handleButtonClick method, we set isButtonDisabled to true when the button is clicked to disable it. You can add your custom logic inside the method to handle the button click. To re-enable the button after a certain duration (in this example, 3 seconds), you can use setTimeout to set isButtonDisabled back to false .

Rajkiran Swain · Answer

isButtonClicked = false; save(param) { if (!this.isButtonClicked) { this.isButtonClicked = true; this.isInProgress = true; // Code for saving the data into multiple tables // After successful save, you can set this.isInProgress = false // and enable the button again this.isInProgress = false; this.isButtonClicked = false; } } Save