Bind each array element to option tag

Question

I am trying to bind an array element from a class to an option tag.

In the angular.io "Tour of Hero" tutorial ( https://angular.io/docs/ts/latest/tutorial/toh-pt2.html ) they do the following for a list :

  <li *ngFor="let hero of heroes"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>

If I understand it right the *ngFor="let hero of heroes" will associate each hero ( so each element in the heroes array ) to a li element and then display some caracteristics of the associated hero with {{hero.id}} for example.

I say associate because if it was just a simple loop with a print I don't see how they would get back the hero object after with onSelect(hero).

I have been trying to do the same with option :

   <option *ngFor="let perso of persos">
     <span>{{perso.id}} : </span> {{perso.nom}}
   </option>

But

(click)="onSelect(hero)"

isn't effective since then click event isn't triggered with option. I couldn't find the right trigger. Any help and additionnal information is very welcomed.

Maximilian Riegler · Accepted Answer · 2016-07-19 13:56:18Z

3

For those native HTML elements Angular 2 offers two-way-bindings, so you can bind your values directly with ngModel - this works for all input tags. So if you change the selection manually, it also updates that variable with the current value. Also if you change selectedPerso programmatically, the view gets updated with the new selection.

<select [(ngModel)]="selectedPerso" (change)="onChange($event)">
    <option *ngFor="let perso of persos" [value]="perso.id">
        <span>{{perso.id}} : </span> {{perso.nom}}
    </option>
</select>

And in your component class body you define that binding variable with a default value which gets preselected on page load:

selectedPerso: number = persos[0].id;

onChange(event) {
    console.log("Selection changed: ", event);
}

edited Jul 19, 2016 at 13:56

answered Jul 19, 2016 at 13:12

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shrimpdrake Over a year ago

Isn't [(ngModel)]="selectedPerso" and (change)="onChange($event)" redundant ?

Maximilian Riegler Over a year ago

It is, I assumed you wanted to execute some code on change.

Alexandre Junges · Accepted Answer · 2016-07-19 13:46:11Z

You can't bind a object to the [value] property of the option element.

I would bind the object's id to the [value] property of the option element and use the (change) event of the select.

See the example below:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    Select your favorite serie:

    <select (change)="onChange($event.target.value)">
      <option *ngFor="let serie of series" [value]="serie.id">{{ serie.name }}</option>
    </select>

    <br />
    <br />

    Selected Serie: <br />
    <span *ngIf="selectedSerie">
      {{ selectedSerie.id  }} - {{ selectedSerie.name }}
    </span>
  `
})
export class AppComponent {

  private series: any[];
  private selectedSerie: any;

  constructor() {
    this.series = [
      { id: 1, name: 'Friends' },
      { id: 2, name: 'How I met Your Mother' },
      { id: 3, name: 'Modenr Family' }
    ];

    this.selectedSerie = this.series[0];
  }

  onChange(serieId: any): void {
    this.selectedSerie = this.series.find(serie => serie.id == serieId);
  }
}

See the complete example here: http://plnkr.co/edit/OOYx3LiN1pO3qffKn7lq

Collectives™ on Stack Overflow

Bind each array element to option tag

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related