angular2 pass object with selector

I have a problem that I cannot pass an object to a component from a selector. I don't know if this is even possible.

So what I want is to have a select dropdown with objects fetched from a rest service. Then on select I want to set the object inside the component where I loaded the selector.

        <div class="col-md-12">
            <div class="col-md-4">
                <game-selector [customers]="customers" [(selected)]="selectedGameSize" (select)="onItemSelected($event)"></game-selector>
            </div>
        </div>
        <div class="col-md-12" [gameSize]="selectedGameSize">
            <div class="col-md-4" *ngIf="gameSize">
                {{gameSize | json}}
            </div>
        </div>

ts file:

@Component({
    selector: 'fleet',
    templateUrl: 'app/fleet/fleet.html',
    directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES, GameSizeSelector, FactionSelector]
})

export class FleetComponent {
    @Output() select = new EventEmitter();
    selectedGameSize: GameSize;
    constructor() { }

    @Input() gameSize: GameSize;

    ngOnInit(){
    }

    onItemSelected(selectedItem: GameSize){
     if (this.gameSize == null) {
        } else {
        console.log("onItemSelected(" + this.gameSize.name + ")");
        }
    }
}

then i have the selector like this:

@Component({
    selector: 'game-selector',
    templateUrl: 'app/selector/gameSelector.html',
    providers: [GameSizeService]
})

export class GameSizeSelector implements OnInit {
    @Output() select: EventEmitter<GameSize> = new EventEmitter();
    @Input() games: GameSize[] = [];
    @Output() gameSize: GameSize;
    @Input() selected: GameSize;

    constructor(
        private gameService: GameSizeService) {};

    getGames() {
        this.gameService
            .getGameSizes()
            .then(games => this.games = games);    
    }

    ngOnInit(){
        this.getGames();
        if (this.games == null) {
        } else {
            this.select.emit(this.gameSize);    
        }
    }

}

and the selector.html

     <div>
        <select (change)="select.next(g)">
            <option *ngFor="let g of games" ngValue="g">
                {{g.name}}
            </option>
        </select>
    </div>

I tried a lot of stuff but mostly I get the value in this case {{g.name}} oder "[object Object]" as output.

But I want the whole object to be passed to the component.

Any ideas how to get this done?

Kind regards

ngValue="g" probably doesn't do what you expect. It creates an attribute on <option> with the value '"g"'. To make Angular process it it needs [] or {{}} (string only).

I'm pretty sure you also need to use [(ngModel)] or (ngModelChange) to get the selected value.

   <select [ngModel]="someProp" (ngModelChange)="select.next($event)">
        <option *ngFor="let g of games" [ngValue]="g">
            {{g.name}}
        </option>
    </select>

[ngModel]="someProp" can be omitted. This is only to assign an initial value.