title: Angular 4 Output() with dropdown
body: <p>Getting started with angular (v4), trying to create a reusable component that simply contains a drop down. But couldn't pass its selected value to a component that uses it via <code>@Output()</code>. Please see plunker example <a href="https://embed.plnkr.co/VNhTb2/" rel="nofollow noreferrer">here</a></p>
  
  <p>Essentially, this is the reusable component:</p>
  
  <pre><code>import { Component,  Output, EventEmitter, NgModule } from '@angular/core';
  
  @Component({
    selector: 'app-group-selector',
    template: `
      &lt;div&gt;
        &lt;label&gt;Group&lt;/label&gt;
        &lt;select [ngModel]="selectedgroup" (ngModelChange)="onGroupChanged($event)"&gt;
          &lt;option *ngFor="let groupName of groupNames" [ngValue]="groupName"&gt;{{groupName}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;`
  })
  export class SharedComponent {
    @Output() selectedgroup: EventEmitter&lt;string&gt; = new EventEmitter&lt;string&gt;();
    groupNames: string[];
    constructor() {
      this.groupNames = ['A', 'B', 'C'];  
      this.selectedgroup = 'A';
    }
  
  
    onGroupChanged(newvalue): void {
      console.log(newvalue);
      this.selectedgroup.emit(newvalue);
    }
  
  }
  </code></pre>
  
  <p>Here is how I want to use it in another component (app component):</p>
  
  <pre><code>import {Component, NgModule, VERSION} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  import {SharedComponent} from 'src/shared.component';
  import { FormsModule} from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Test&lt;/h2&gt;
        &lt;app-group-selector (selectedgroup)='onSelectedGroupChanged($event)'&gt;&lt;/app-group-selector&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
    name:string;
    selectedGroup:string;
    constructor() {
      //this.name = ""//`Angular! v${VERSION.full}`
    }
  
    onSelectedGroupChanged(newgroup):void {
      this.selectedGroup = newgroup;
      console.log(newgroup);
    }
  }
  
  @NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ App, SharedComponent ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>
  
  <p>Clearly the problem is with <code>&lt;app-group-selector (selectedgroup)='onSelectedGroupChanged($event)'&gt;&lt;/app-group-selector&gt;</code>
  The error I got on plunker is <strong><code>instance[output.propName].subscribe is not a function</code></strong>. On my machine I got a different error (probably due to not using the latest version of angular though I am still using v4): <strong><code>ERROR TypeError: this.selectedgroup.emit is not a function</code></strong></p>