Angular global directive or wrapping button to prevent double click

We have idempotent buttons and non-idempotent buttons in our app and a 2nd click causes a 'You encountered an error'. We would like to do a few things but perhaps there is a better method....(I put this as one post as it is all related and perhaps there is a set of better ways that someone knows)

Item 1: create a global directive - throw error and print out we require you to use or . Seems like Angular 18 took global away which prevents us from catching these. this would be 100% catching these where code reviews only catches it 80% of the time.

Item 2: create get-button and post-button but unfortunately, our has many unique directives on it and you cannot pass directives to the button. we can only pass some variables to if..else different buttons which is a bit ugly.

our disable the button during a remote request and re-enables it so that a double click is not happening until the operation fails or if success, they go to next page(going back and doing again actually works but doing twice does not).

Trying to solve the double click issue in the face of slow networks where users are very likely to click twice in angular 18. We don't like timeouts as we prefer to utilize the client request timing out and throwing a timeout error at which point the button will be re-enabled.

I tried the above so why is SO asking me again what I tried.

My current post-button has to if statement which will not work for many directives ->

@if(directive === "mat-flat-button") {
<button
mat-flat-button
[color]="color"
[disabled]="buttonDisabled"
(click)="emitClickEvent()"
>
<ng-content></ng-content>
</button>
} @else {
<button
[disabled]="buttonDisabled"
(click)="emitClickEvent()"
>
<ng-content></ng-content>
</button>
}

Continue reading...