Nemir Nemir - 10 months ago 84
TypeScript Question

Angular2 two-way binding to select option not updating

I have a select list that is bound to an Person property on my component using [ngValue]. When I change the select, the underyling selectedPerson property is updated as expected. However, the select does no default to the selected person on initialisation nor does it update if I change the selected person in code.

Any help into what I am missing would be greatly appreciated. Here's my code...

import {Component, OnInit, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';

selector: 'my-app',
template: `
<select [(ngModel)]="selectedPerson"
<option [ngValue]="null">Please choose...</option>
<option *ngFor="let p of people"
[attr.selected]="p.personId === selectedPerson?.personId ? true : null ">{{}}</option>
<p>The selected person is {{selectedPerson?.name}}</p>
<button type="button" (click)="selectJane()">Select Jane</button>
<button type="button" (click)="clearSelection()">Clear Selection</button>
export class App implements OnInit {

public ngOnInit() {

this.people = [
{ personId: 1, name: "Tom" },
{ personId: 2, name: "Mary" },
{ personId: 3, name: "Jane" }
this.selectedPerson = { personId: 2, name: "Mary" }

public people: Person[];
public selectedPerson: Person;

public selectJane(){
this.selectedPerson = { personId: 3, name: "Jane" }

public clearSelection(){
this.selectedPerson = null;

export class Person {
public personId: number;
public name: string;

imports: [ BrowserModule, FormsModule ],
declarations: [ App ],
bootstrap: [ App ]
export class AppModule {}

...and here's a Plunker

Answer Source

The problem is, that by using ngValue, the select expects the same reference, not just a similar looking object.

You could add a method to select by name like this:

public selectByName(name: string) {
   this.selectedPerson = this.people.find(person => === name);

And then call it in your ngOnInit():

// or this.selectedPerson = this.people[2];

And in selectJane():

public selectJane(){

Your updated Plunker