I have this Directive =>
export class ThrottleClickDirective implements OnInit, OnDestroy {
@Input()
throttleTime = 500;
@Output()
throttleClick = new EventEmitter();
public throttling = false;
private clicks = new Subject();
private subscription: Subscription;
constructor() { }
ngOnInit() {
this.subscription = this.clicks.pipe(
throttleTime(this.throttleTime)
).subscribe(e => {
this.throttleClick.emit(e)
this.throttling = false;
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
@HostListener('click', ['$event'])
clickEvent(event) {
event.preventDefault();
event.stopPropagation();
this.clicks.next(event);
this.throttling = true;
}
}
and this is my template
<button mat-button *ngFor="let button of buttons"
[ngClass]="[((button.className) ? button.className : ''), 'custom-popup-button']"
[disabled]="(button.type === 'confirmation')"
appThrottleClick
(throttleClick)="button.action();"
[throttleTime]="500">
{{button.text}}
</button>
I would like to disable my button IF the but throttling
is currently true (so that it shows the click is been accounted for.
Is there a way to access that variable from the template (outside the directive)
this component (the component where the button come from) is a generic component that as a different amount of button base on the setup, so I can't really store variable on it. The best way would be to have some kind of connection between the disable
and the throttling
Something like this could work
@HostBinding('class.myDisableClass') throttling:boolean;
and in css
.myDisableClass button{
cursor: not-allowed;
pointer-events: none;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.