Angular 5 Set selected value of HTML Select Element

Question

Here is what I'm trying to do:

<select name="manager" id="manager" [(ngModel)]="property.manager" class="form-control" (change)="onChangeManager($event)" required>
  <option disabled value="">Select Manager</option>
  <option *ngFor="let manager of managers" [ngValue]="manager" [selected]="manager?.name === 'Subhan Ahmed'">
    {{manager?.name}}
  </option>
</select>

What I need is when the view is initialised, I need to set the value of the select where manager?.name == property.manager.name (which is loaded from db on on another event). I've tried to place a default text Subhan Ahmed to select the default value but its not working.

Managers are loaded at the start, I load them from Firestore and assign them to a variable managers: Observable<Manager>; during subscribe(), while property.manageris loaded after another input's change event.

Am i missing something?

Solution

You can select an item of the dropdown list by setting the value of property.manager. Assuming that selectedName is the name of the Manager item that you want to select, you can do this:

// Case sensitive
this.property.manager = this.managers.find(m => m.name === this.selectedName);

// Case insensitive
let selectedNameUp = this.selectedName.toUpperCase();
this.property.manager = this.managers.find(m => m.name.toUpperCase() === selectedNameUp);

---

Here are the relevant parts of the markup and code. See this stackblitz for a demo.

HTML:

<select name="manager" [(ngModel)]="property.manager" class="form-control" required>
  <option disabled [ngValue]="undefined">Select Manager</option>
  <option *ngFor="let manager of managers" [ngValue]="manager">{{manager.name}}</option>
</select>
<input type="text" [(ngModel)]="selectedName" (ngModelChange)="onNameChange($event)">

Code:

selectedName: string;

property = {
  ref_no: '',
  address: '',
  manager: undefined
};

managers = [
  { "company": "Test Company", "name": "John Doe", "id": "3oE37Fo2QxGHw52W7UHI" }, 
  { "company": "Another Company", "name": "John Brown", "id": "LRF8xAi48rRuWu0KZex3" }, 
  { "company": "XYZ", "name": "Subhan Ahmed", "id": "TqOQHbdwJdwgwD8Oej8v" }
];

onNameChange($event) {
  let selectedNameUp = this.selectedName.toUpperCase();
  this.property.manager = this.managers.find(m => m.name.toUpperCase() === selectedNameUp);
}

Comments

[Subhan]

Yes It does have an ID generated by Firestore which I snapshot along with the data.

[Subhan]

stackblitz.com/edit/angular-coraqv Have a look at this scenario. Type a name in input and hit tab. The select box should show you the selected value.

[Subhan]

stackblitz.com/edit/… Have a look now.

[ConnorsFan]

I updated my answer, and included the stackblitz adapted from yours.

[Subhan]

No, In my scenario, its not working. I'll update the stackblitz with more code. I'm just missing something I recon. Your answer was really helpful by the way. I'll accept it as an answer as I get things working so that others can use a correct answer for future references. Thanks

[Subhan]

Your solution works. It was some issue with how I implemented it in my scenario. Thanks you.