-
-
Save svetlio/8997fe4591c38095f57e17a759b31720 to your computer and use it in GitHub Desktop.
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); | |
} | |
} |
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); | |
} | |
} |
great code :) just implemented, works like a charm!
I am using Angular 6 and Material 6.2.1. I have noticed that if the person clicks on the button's text the no-dbl-click-mat.directive.ts code works. However, if they click on the button but not the text it does not. I modified the code:
clickEvent(event) {
// see if the srcElement has the disabled property. If so then it is the actual button. If not then the user
// clicked on the button's text (span element)
const button = (event.srcElement.disabled === undefined) ? event.srcElement.parentElement : event.srcElement;
button.setAttribute('disabled', true);
setTimeout(function () {
button.removeAttribute('disabled');
}, 1000);
}
I am using Angular 6 and Material 6.2.1. I have noticed that if the person clicks on the button's text the no-dbl-click-mat.directive.ts code works. However, if they click on the button but not the text it does not. I modified the code:
clickEvent(event) {
// see if the srcElement has the disabled property. If so then it is the actual button. If not then the user
// clicked on the button's text (span element)
const button = (event.srcElement.disabled === undefined) ? event.srcElement.parentElement : event.srcElement;
button.setAttribute('disabled', true);
setTimeout(function () {
button.removeAttribute('disabled');
}, 1000);
}
That's really good solution. I was facing that problem too @bobwinners
Does this directive work for IE11
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.
Thanks for help, it's work fine