title: Angular2 EventEmitter and preventDefault()
body: <p>Is there a way in Angular2 to somehow prevent the default for events using the EventEmitter?</p>
  
  <p>I have the following scenario:</p>
  
  <pre><code>import {Component, Output, EventEmitter} from 'angular2/core'
  
  @Component({
    selector: 'my-component',
    template: `&lt;button (click)="clickemitter.emit($event); onClick($event)" [style.color]="color"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/button&gt;`
  })
  export class MyComponent {
    @Output clickemitter: EventEmitter&lt;MouseEvent&gt; = new EventEmitter();
  
    private color: string = "black";
  
    constructor() {
  
    }
  
    private onClick(event: MouseEvent): void {
      if(!event.defaultPrevented) //gets called before the observers of clickemitter
        this.color = "red";
      else this.color = "blue";
    }
  }
  
  @Component({
    selector: 'my-app',
    providers: [],
    template: `
      &lt;my-component (clickemitter)="$event.preventDefault()"&gt;Hello Angular&lt;/my-component&gt;
    `,
    directives: [MyComponent]
  })
  export class App {
    constructor() {
  
    }
  }
  </code></pre>
  
  <p>I made a Plunker for this, too: <a href="https://plnkr.co/edit/yIoF1YgvkiZLBPZ6VHTs?p=preview" rel="noreferrer">https://plnkr.co/edit/yIoF1YgvkiZLBPZ6VHTs?p=preview</a></p>
  
  <p><strong>The Problem</strong>
  If i click on the button the color of the button wouldn't turn blue as it should but it turns red instead.
  This might be because EventEmitter.emit()/next() seem to work asynchronous. 
  I tried to solve this problem by also subscribing my onClick() method at the emitter and just call <em>clickemitter.emit($event)</em> in my button (click) event handler. This would work for the Plunker Demo when i did it in ngAfterInit(). But what if someone subscribes to the clickemitter later? My component would get called before that observer again and my component would be inconsistent.</p>
  
  <p><strong>The Question</strong>
  How can i ensure that my component onClick() handler will get called at the very last to guarantee that no other observer can prevent the default behavior afterwards? Or is there a complete different way of achieving my goal?</p>