Can you prevent an Angular component's host click from firing?

Question

I'm creating an Angular component that wraps a native <button> element with some additional features. Buttons do not fire a click event if they're disabled and I want to replicate the same functionality. i.e., given:

<my-button (click)="onClick()" [isDisabled]="true">Save</my-button>

Is there a way for my-button to prevent onClick() from getting called?

In Angular you can listen to the host click event this way, and stop propagation of the event:

//Inside my-button component
@HostListener('click', ['$event'])
onHostClick(event: MouseEvent) {
  event.stopPropagation();
}

This prevents the event from bubbling to ancestor elements, but it does not stop the built-in (click) output from firing on the same host element.

Is there a way to accomplish this?

---

Edit 1: the way I'm solving this now is by using a different output called "onClick", and consumers have to know to use "onClick" instead of "click". It's not ideal.

Edit 2: Click events that originate on the <button> element are successfully stopped. But if you put elements inside the button tag as I have, click events on those targets do propagate up to the host. Hm, it should be possible to wrap the button in another element which stops propagation...

Answer 1

You could do the following:

• Redefine the click event of the component, and emit this event when the button is clicked
• Set the CSS style pointer-events: none on the component host
• Set the CSS style pointer-events: auto on the button
• Call event.stopPropagation() on the button click event handler

If you need to process the click event of other elements inside of your component, set the style attribute pointer-events: auto on them, and call event.stopPropagation() in their click event handler.

You can test the code in this stackblitz.

import { Component, HostListener, Input, Output, ElementRef, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-button',
  host: {
    "[style.pointer-events]": "'none'"
  },
  template: `
    <button (click)="onButtonClick($event)" [disabled]="isDisabled" >...</button>
    <span (click)="onSpanClick($event)">Span element</span>`,
  styles: [`button, span { pointer-events: auto; }`]
})
export class MyCustomComponent {

  @Input() public isDisabled: boolean = false;
  @Output() public click: EventEmitter<MouseEvent> = new EventEmitter();

  onButtonClick(event: MouseEvent) {
    event.stopPropagation();
    this.click.emit(event);
  }

  onSpanClick(event: MouseEvent) {
    event.stopPropagation();
  }
}

---

UPDATE:

Since the button can contain HTML child elements (span, img, etc.), you can add the following CSS style to prevent the click from being propagated to the parent:

:host ::ng-deep button * { 
  pointer-events: none; 
}

Thanks to @ErikWitkowski for his comment on this special case. See this stackblitz for a demo.

Answer 2

I do not believe there is a native way to prevent the event from firing, as supported by this git issue in 2016:

The order of execution is red herring - the order in which an event on the same element is propagated to multiple listeners is currently undefined. this is currently by design.

Your problem is that the event exposed to the listeners is the real DOM event and calling stopImmediatePropagation() on the provided event stops execution of other listeners registered on this element. However since all the the listeners registered via Angular are proxied by just a single dom listener (for performance reasons) calling stopImmediatePropagation on this event has no effect.

Answer 3

Catch click with early subscription.

Easy way would be to catch event on capture phase, but there is some problem with capture catch in a Firefox (when event target is disabled, click event comes to host on bubbling phase, not on capture). So we have to add event listener in constructor (not on init) to be the first subscriber and to use stopImmediatePropagation on event.

@Input() disabled: boolean;

constructor(private elementRef: ElementRef) {
  this.elementRef.nativeElement.addEventListener('click', this.captureClick, true);
}

ngOnDestroy() {
  this.elementRef.nativeElement.removeEventListener('click', this.captureClick, true);
}

private captureClick = (event: PointerEvent) => {
  if (this.disabled) {
    event.stopPropagation();
    event.preventDefault();
    event.stopImmediatePropagation();
    return false;
  }
  return true;
};

Answer 4

You can use the native add and remove EventListeners. This is in no way a good solution when thinking in angular terms. Also, this won't work if you put disabled attribute in button as it will override eventListeners attached. A disabled class need to be used instead. (Or else wrap button in a span and use template ref #btn from it.)

StackBlitz

import { Component, OnInit, OnChanges, HostListener, Input, Output, EventEmitter, SimpleChanges, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-my-button',
  template: `<button [class.disabled]="isDisabled" #btn><span>hey</span></button>`,
  styles: [`button.disabled { opacity:0.5 }`]
})
export class MyButtonComponent implements OnInit, OnChanges {
  disableClick = e => e.stopPropagation();
  @Input() isDisabled: boolean;
  @ViewChild('btn') btn: ElementRef;
  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    if(this.isDisabled) {
      this.btn.nativeElement.addEventListener('click', this.disableClick);
    } else {
      this.btn.nativeElement.removeEventListener('click', this.disableClick);
    }
  }
  ngOnInit() {
  }

}

Answer 5

You can try stop propagation of the event in capturing mode (look at true as the last param of addEventListener calling and window as the listening object).

window.addEventListener('click', (event) => {
    let clickDisallowed = true; // detect if this click is disallowed

    if (event.target === this.elementRef.nativeElement && clickDisallowed) {
        event.stopImmediatePropagation();
    }
}, true);

And do not forget unsubscribe this listener.