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

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.

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