title: How to prevent clicks to custom button component in Angular 4
body: <p><strong>tl;dr - How do I get the <code>click()</code> handler on the myButton component to honor the disabled state of the button?</strong></p>
  
  <p>I have a custom button component that's used to componentize buttons of similar look and feel, including text and FA Icons. The button component gets fed certain inputs, including its text and a flag for whether or not its disabled. When disabled, it displays correctly (i.e. dimmed and the no-smoking cursor), but its <code>click()</code> handler always receives the click. </p>
  
  <p>I think I know why this is happening, but I don't know how to fix it. I've tried declaring an <code>Output() click = new EventEmitter&lt;any&gt;()</code> on the button component thinking that somehow Angular would wire it up correctly but that didn't work. </p>
  
  <p>The consumer of my button would do so with something like this: </p>
  
  <pre><code>//foo.component.html
  ...
  &lt;my-button
    (click)="saveWidget()"
    [disabled]="shouldBeDisabled"
    type="{{buttonTypes.save}}"&gt;
  &lt;/myButton&gt;
  ...
  
  //foo.component.ts
  import { ButtonTypes } from './myButton';
  
  export class FooComponent implements OnInit {
    buttonTypes = ButtonTypes;
  
    saveWidget() {
      //do some saving
    }
  
    get shouldBeDisabled() {
      return true; //Normally a real test in here
    }
    ...
  }
  </code></pre>
  
  <p>My problem is that when this button is used, the click handler (i.e. <code>saveWidget()</code> on foo.component) is being invoked regardless of the <code>my-button</code>'s disabled state. </p>
  
  <p>The button component looks something like this:</p>
  
  <pre><code>export enum ButtonTypes {
    add,
    cancel,
    save,
  }
  
  @Component({
    selector: 'my-button',
    template: `&lt;button [type]="tagType"
                  [disabled]="disabled"
                  [ngClass]="btnClasses"&gt;
                    &lt;i *ngIf="hasLeft" class="fa" [ngClass]="iconCls" aria-hidden="true"&gt;&lt;/i&gt;
                    &lt;span class="hidden-xs hidden-sm"&gt;{{text}}&lt;/span&gt;
                    &lt;i *ngIf="hasRight" class="fa" [ngClass]="iconCls" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/button&gt;`
  })
  export class ButtonComponent implements OnInit {
    @Input() disabled = false;
    @Input('type') btnType: ButtonTypes;
    @Input() color?: ButtonColor;
    @Input() size?: ButtonSize;
    ...
  }
  </code></pre>