Utilizing Angular 7 along with Typescript 3.1.1
Aim
The objective is to implement click events that cannot be triggered again until the previous click event is completed, regardless of the outcome.
Illustration
<div>
<span *ngFor="let a of [1,2,3,4,5,6]" (asyncClick)="onClick(a)">
</span>
</div>
Here, asyncClick replaces click.
asyncClick accepts a Promise<any> and utilizes .then on it.
During the period waiting for then to execute, the button should be disabled.
Obstacle Faced
Given that asyncClick can be attached to different elements such as div, span, button, input, a, img, or even a component, I aim to avoid creating a component for each type as it lacks flexibility.
Progress Made So Far
A directive has been crafted to detect click events using
@HostListener('click', ['$event'])
However, the challenge lies in obtaining the promise for the click event. An example is
<div asyncClick (asyncClick)="myOnClick()"></div>myOnClick is triggered, the promise to await is missing.
myOnClick (num: number): Promise<any> {
return Promise.resolve();
}