user3554083 user3554083 - 1 year ago 126
jQuery Question

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 class="col-md-12" [gameSize]="selectedGameSize">
<div class="col-md-4" *ngIf="gameSize">
{{gameSize | json}}

ts file:

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;


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

then i have the selector like this:

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;

private gameService: GameSizeService) {};

getGames() {
.then(games => = games);

if ( == null) {
} else {;


and the selector.html

<select (change)="">
<option *ngFor="let g of games" ngValue="g">

I tried a lot of stuff but mostly I get the value in this case {{}} 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

Answer Source

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)="$event)">
        <option *ngFor="let g of games" [ngValue]="g">

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download