Can you prevent the Angular component host from firing?

Question

I am creating an Angular component that wraps its own <button>element with some additional features. Buttons do not fire a click event if they are disabled and I want to replicate the same functions. those. provided:

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

Is there any way to my-buttonprevent onClick()from calling?

In Angular, you can listen for the host click event this way and stop the event from propagating:

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

This prevents the appearance of bubbles in the elements of the ancestor, but does not stop the output of the built-in (click)output to the same element of the node.

Is there any way to do this?

---

1:, , , "onClick", , "onClick" "click". .

2: , <button>, . , , , . Hm, , ...

Answer 1

:

• click
• CSS pointer-events: none
• CSS pointer-events: auto
• event.stopPropagation()

click , pointer-events: auto event.stopPropagation() click.

.

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:

HTML (span, img ..), CSS, :

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

@ErikWitkowski . .

Answer 2

, , git 2016 :

- - , , undefined. .

, , , DOM, stopImmediatePropagation() , . , , Angular, ( ), stopImmediatePropagation .

Answer 3

You can use your own add-on and remove EventListeners. This is in no way a good solution if you think in angular terms. Also, this will not work if you put the attribute disabledin button, as it will override the eventListeners attachment. Instead, use a class disabled. (Or wrap buttonin spanand use the ref pattern #btnfrom 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() {
  }

}