Angular 9 button click firing multiple times

user_2746601 0
Viewed 1454

Html

<button (click)="myClickFunction($event)">
   Click Me
</button>

app.component.ts

myClickFunction(event) { 
      //just added console.log which will display the event details 
      console.log('inside myClickFunction');
   }

When I click on the button (named click me) multiple times, the console.log is printing multiple times. How to make it call only the first time irrespective of number of clicks?

I have tried event.preventdefault(), but getting following error:

Cannot read property 'preventDefault' of undefined

Any suggestion will be appreciated.

angular javascript
2 Answers

You can create a counter to track the number of clicks and guard the click method with respect to that.

private clickCounter = 0;

myClickFunction(event) { 
  if(this.clickCounter > 0){
    return;
  }
  this.clickCounter++;
  //just added console.log which will display the event details 
  console.log('inside myClickFunction');
}
user_57062930

Eko's Answer is correct but as you want the function to run only once it would be better to use Boolean instead.

private isClicked = false;

myClickFunction(event) { 
  if(this.isClicked){
    return;
  }
  this.isClicked = true;
  //just added console.log which will display the event details 
  console.log('inside myClickFunction');
}

Or you can disable the button in the function after click.

user_22328190
Related