How to prevent double click in Angular?

Question

I have a component with click.

When I click this element, openModa

Answer 1

I propose a simpler approach for buttons:

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

const DISABLE_TIME = 300;

@Directive({
    selector: 'button[n-submit]'
})
export class DisableButtonOnSubmitDirective {
    constructor(private elementRef: ElementRef) { }
    @HostListener('click', ['$event'])
    clickEvent() {
        this.elementRef.nativeElement.setAttribute('disabled', 'true');
        setTimeout(() => this.elementRef.nativeElement.removeAttribute('disabled'), DISABLE_TIME);
    }
}

Example usage: