Угловая директива для остановки события щелчка по умолчанию

Вариант использования заключается в том, чтобы с помощью Angular создать директиву, которую можно использовать для остановки события по умолчанию (щелчка), если условие истинно. Если false, разрешить срабатывание этого события по умолчанию (щелчок).

Весь приведенный ниже код работает, за исключением того, что он НЕ останавливает распространение, поэтому обработчик события нажатия на кнопку все еще срабатывает.

HTML

        <button mat-raised-button color = "primary" [myDisabled] = "reactiveForm.invalid" (click) = "onSubmit()">A11y Disabled</button>

Директива машинописного текста

import { Directive, ElementRef, HostListener, Input, Renderer2, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({
  selector: '[myDisabled]',
})
export class A11yDisabled {

private _isdisabled: boolean = false

constructor(
    private _elementRef: ElementRef,
    private _renderer: Renderer2
){}

@Input() set edjDisabled(condition: boolean) {
    console.info('condition', condition);
    if (condition) {
        this._isdisabled = true;
        this._renderer.addClass(this._elementRef.nativeElement, 'a11y-disabled');
        this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-disabled', 'true');
    } else {
        this._isdisabled = false;
        this._renderer.removeClass(this._elementRef.nativeElement, 'a11y-disabled');
        this._renderer.removeAttribute(this._elementRef.nativeElement, 'aria-disabled');
    }
}


@HostListener('click', ['$event'])
onClick(e: any) {
    console.info('mouseup', this._isdisabled);
    if (this._isdisabled) {
        e.stopPropagation();
        e.preventDefault();
        console.info('stop', this._isdisabled);
    }
}

}