title: Can you prevent an Angular component's host click from firing?
body: <p>I'm creating an Angular component that wraps a native <code>&lt;button&gt;</code> 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:</p>
  
  <pre><code>&lt;my-button (click)="onClick()" [isDisabled]="true"&gt;Save&lt;/my-button&gt;
  </code></pre>
  
  <p>Is there a way for <code>my-button</code> to prevent <code>onClick()</code> from getting called?</p>
  
  <p>In Angular you can listen to the host click event this way, and stop <em>propagation</em> of the event:</p>
  
  <pre><code>//Inside my-button component
  @HostListener('click', ['$event'])
  onHostClick(event: MouseEvent) {
    event.stopPropagation();
  }
  </code></pre>
  
  <p>This prevents the event from bubbling to ancestor elements, but it does not stop the built-in <code>(click)</code> output from firing on the same host element.</p>
  
  <p>Is there a way to accomplish this?</p>
  
  <hr>
  
  <p><strong>Edit 1:</strong> 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.</p>
  
  <p><strong>Edit 2:</strong> Click events that originate on the <code>&lt;button&gt;</code> 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...</p>