CODEWITHSUNDEEP
javascriptangular
BrentShanahan
BrentShanahan

Reputation: 691

Angular2 ngFor - set selected

When a user logs in to my app, it loads the previous UI setup that they were using. To switch between interfaces there is a dropdown that lists all the options that specific user is authorized to use.

I would like the selected option in that list to reflect the previous UI when the page is loading but I'm having trouble coming up with how to set the selected <option>

Here is some example code:

//User object from DB
var user = {
  username: admin,
  previousUI: 'Build',
  authorizedUI: [{title:'Default'}, {title:'Edit'}, {title:'Build'}]
}

html:

<form class="navbar-form">
  <label>System: </label>
  <select (change)="systemSelect($event.target.value)">
    <option *ngFor="let system of user.authorizedUI" [value]="system.title">
      {{system.title}}
    </option>
  </select>
</form>

In Angular2 how do I set the selected parameter on the option to reflect user.previousUI?

I tried adding this:

<option *ngFor="let system of user.authorizedUI" [value]="system.title" [selected]="system.title === user.previousUI">

But that didn't seem to do it.

Upvotes: 1

Views: 302

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

One way would be

<select [ngModel]="user?.previousUI" (change)="systemSelect($event.target.value)">

Upvotes: 2

Related Questions