访问组件模板中的指令变量

Question

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

Answer 1

Something like this could work

@HostBinding('class.myDisableClass') throttling:boolean;

and in css

.myDisableClass button{
   cursor: not-allowed;
   pointer-events: none;
}