Listener undefined event emitter parameter

Question

In Angular2 component, I use EventEmitter to generate an event with a parameter. In the parent component listener, this parameter is undefined. Here is the plunker :

import {Component, EventEmitter, Output} from 'angular2/core' @Component({ template: `<ul> <li *ngFor="#product of products" (click)="onClick(product)">{{product.name}}</li> </ul>`, selector: 'product-picker', outputs: ['pick'] }) export class ProductPicker { products: Array<any>; pick: EventEmitter<any>; constructor() { this.products = [ {id: 1, name: 'first product'}, {id: 2, name: 'second product'}, {id: 3, name: 'third product'}, ]; this.pick = new EventEmitter(); } onClick(product) { this.pick.emit(product); } } @Component({ selector: 'my-app', providers: [], template: ` <div> <h2>Pick a product</h2> <product-picker (pick)="onPick(item)"></product-picker> </div> <div>You picked: {{name}}</div> `, directives: [ProductPicker] }) export class App { name: string = 'nothing'; onPick(item) { if (typeof item == 'undefined') { console.log("item is undefined!"); } else { this.name = item.name; } } } 

How to transfer the selected product to the parent component?

Answer 1

You must $ event:

 <product-picker (pick)="onPick($event)"></product-picker> 

This corresponds to the value that you specified when passing the associated EventEmitter to the emit method.

In your case, the item variable provided as a parameter does not match anything.