Can I pass variables using EventEmitter from angular2 component?

Question

I am new to angular2 so please excuse if I use the wrong terms in describing my problem.

I have a simple component that lets a user choose an option. Now I want to dispatch this option to the parent component. I am doing this:

// import the necessary angular2 resources:
import {Component, Output, EventEmitter} from 'angular2/core';
...
// create the emitter in my component class:
export class MyClassThatLetsUserSelectSomeContentId{
   @Output() selectEvent: EventEmitter<any> = new EventEmitter();
   public selectedId: string;
   // this does get called, showing the correct id in the console
   onSelect(selectedItem: MyCustomItem){
       this.selectedId = selectedItem.id;
       console.log("selectedId:" + this.selectedId);
       this.selectEvent.emit(this.selectedId);
   }
}

and in the main component I include it in the template like this:

<my-selector-component (selectEvent)="onItemSelected(selectedItemId)"></my-selector-component>

And the function does get calles, but the variable is undefined:

onItemSelected(selectedItemId: string){
    console.log("onItemSelected(" + selectedItemId + ")");
}

the console output is:

log: onItemSelected(undefined)

So what am I missing? The event is sent and the function gets called but the parameter is lost.

Maybe some other form of binding to the selected Id would be better altogether. I am open to any kind of solution as long as the parent component can react to a new select from the view component.

Answer 1

You need to use the $event variable to get the value you send when triggering the event:

<my-selector-component (selectEvent)="onItemSelected($event)">
</my-selector-component>

The value you provide as parameter of the emit method of the EventEmitter corresponds to it.