Angular 4 Output() with dropdown

Viewed 2393

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 @Output(). Please see plunker example here

Essentially, this is the reusable component:

import { Component,  Output, EventEmitter, NgModule } from '@angular/core';

@Component({
  selector: 'app-group-selector',
  template: `
    <div>
      <label>Group</label>
      <select [ngModel]="selectedgroup" (ngModelChange)="onGroupChanged($event)">
        <option *ngFor="let groupName of groupNames" [ngValue]="groupName">{{groupName}}</option>
      </select>
    </div>`
})
export class SharedComponent {
  @Output() selectedgroup: EventEmitter<string> = new EventEmitter<string>();
  groupNames: string[];
  constructor() {
    this.groupNames = ['A', 'B', 'C'];  
    this.selectedgroup = 'A';
  }


  onGroupChanged(newvalue): void {
    console.log(newvalue);
    this.selectedgroup.emit(newvalue);
  }

}

Here is how I want to use it in another component (app component):

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: `
    <div>
      <h2>Test</h2>
      <app-group-selector (selectedgroup)='onSelectedGroupChanged($event)'></app-group-selector>
    </div>
  `,
})
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 {}

Clearly the problem is with <app-group-selector (selectedgroup)='onSelectedGroupChanged($event)'></app-group-selector> The error I got on plunker is instance[output.propName].subscribe is not a function. On my machine I got a different error (probably due to not using the latest version of angular though I am still using v4): ERROR TypeError: this.selectedgroup.emit is not a function

3 Answers
Related