Directive: lock double click on a button

Question

Hello,

I have a directive to lock the double click buttons on my system... However, when clicking a button that is "calling" the directive, it does not do its function (e.g., if the button is Submit, Submit does not happen).

I’d like to use it to several buttons with different functions.

Directive

import { Directive, HostListener } from '@angular/core';

@Directive({
    selector: '[blockClicks]'
})
export class NoDblClickMatDirective {

    constructor() { }

    @HostListener('click', ['$event'])
    clickEvent(event) {
        const button = (event.srcElement.disabled === undefined) ? event.srcElement.parentElement : event.srcElement;
        button.setAttribute('disabled', true);
        setTimeout(function () {
            button.removeAttribute('disabled');
        }, 2000);
    }
}

Module Directive

import { NgModule } from "@angular/core";
import { NoDblClickMatDirective } from "./nodblclickmat.directive";

@NgModule({
    imports: [],
    declarations: [NoDblClickMatDirective],
    exports: [NoDblClickMatDirective]
})
export class NoDblClickMatDirectiveModule { }

Html snippet

<button class="btn btn-info" blockClicks>Entrar</button>

Answer 1

I would do something like this:

import { Directive, HostListener } from '@angular/core';

@Directive({
    selector: '[blockClicks]'
})
export class NoDblClickMatDirective {
    lastClick = 0;

    constructor() { }

    @HostListener('click', ['$event'])
    clickEvent(event) {    
        const currentTime = new Date().getTime();
        const ultimoClick = currentTime - this.lastClick;


        if (ultimoClick < 300) {//voce pode adaptar de acordo com o que vc considera um click duplo
            event.stopPropagation();
        } 
        this.lastClick = currentTime;
    }
}