Angular2 *ngFor in select list, set active based on string from object Angular2 *ngFor in select list, set active based on string from object angular angular

Angular2 *ngFor in select list, set active based on string from object


This should work

<option *ngFor="let title of titleArray"     [value]="title.Value"     [attr.selected]="passenger.Title==title.Text ? true : null">  {{title.Text}}</option>

I'm not sure the attr. part is necessary.


Check it out in this demo fiddle, go ahead and change the dropdown or default values in the code.

Setting the passenger.Title with a value that equals to a title.Value should work.

View:

<select [(ngModel)]="passenger.Title">    <option *ngFor="let title of titleArray" [value]="title.Value">      {{title.Text}}    </option></select>

TypeScript used:

class Passenger {  constructor(public Title: string) { };}class ValueAndText {  constructor(public Value: string, public Text: string) { }}...export class AppComponent {    passenger: Passenger = new Passenger("Lord");    titleArray: ValueAndText[] = [new ValueAndText("Mister", "Mister-Text"),                                  new ValueAndText("Lord", "Lord-Text")];}