Angular2 access a select event change within the component
<p>Working with Angular2s forms and trying to figure out the process of handling events with selects. I have an object Heros that is stored in the options. What I want to do is that when I hero is selected, trigger an event to the parent component that will do something with the results. However, I can't find a concrete example of being able to receive an event when the selection has changed (ie a new hero in the list as been selected).</p>

<pre><code>interface Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  template:`
  &lt;h1&gt;{{title}}&lt;/h1&gt;
  &lt;form&gt;
    &lt;select&gt;
        &lt;option *ngFor="#hero of heros "
                [value]="hero"&gt;
            {{hero .name}}
        &lt;/option&gt;
    &lt;/select&gt;
  &lt;/form&gt;
`
})
   export class AppComponent {
   @Input() heros:Observable&lt;Hero&gt;
   @Output("selectedHeroChange") selectedHeroChange:EventEmitter&lt;any&gt; = new EventEmitter

   onHeroChange(hero:Hero){
      this.selectedHeroChange._next(hero);
   }    
}
</code></pre>

<p>Thanks in advance!</p>