Angular 5 directive - Prevent double click for html button (no-dbl-click.directive.ts), and material mat-button (no-dbl-click-mat.directive.ts)

no-dbl-click-mat.directive.ts

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

@Directive({
  selector: '[appNoDblClickMat]'
})
export class NoDblClickDirectiveMat {
  
  constructor() { }
  
  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.srcElement.parentElement.setAttribute('disabled', true);
    setTimeout(function(){
      event.srcElement.parentElement.removeAttribute('disabled');
    }, 1000);
  }

}

no-dbl-click.directive.ts

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

@Directive({
  selector: '[appNoDblClick]'
})
export class NoDblClickDirective {
  
  constructor() { }
  
  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.srcElement.setAttribute('disabled', true);
    setTimeout(function(){ 
      event.srcElement.removeAttribute('disabled');
    }, 500);
  }

}

https://coryrylan.com/blog/creating-a-custom-debounce-click-directive-in-angular

Thanks !
To make it work for buttons and material buttons, you can use event.currentTarget.
The current target will refer directly to the <button> as you attached the event handler there.