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