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

Question

I'm trying using the ngFor on my select DropDownList. Have loaded in the options which should be in the dropdown.

The code you see here:

<div class="column small-12 large-2">
    <label class="sbw_light">Title:</label><br />
    <select [(ngModel)]="passenger.Title">
       <option *ngFor="#title of titleArray" [value]="title.Value">{{title.Text}}</option>
    </select>
</div>

Based on this code, it produces a dropdown which look like this image.

The problem is that I want to set one of them "Mr or Mrs" as the active one based on the passenger.Title which is a string either "Mr" or "Mrs".

Any can help see what I'm doing wrong here?

Solution 1

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.

Solution 2

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")];

}

Comments

[Vnuuk]

Thanks. Good answer!

[Dumber_Texan2]

Adding the "? true : null" to the [select] attribute is what worked for me. I searched on this for a couple of days. In my case, I'm pulling Asp.Net TimeZone Ids from an API and allowing the user to select the correct one.