I've been working with Angular 7 recently, and finding some strange stuff happening when trying to display a dropdown list, and showing a default value within this list. Here are two separate lists respectively:
sample.component.html
<select [(ngModel)]="organization" id="organization" required>
<option *ngFor="let organization of organizations" [value]="organization.id" [ngValue]="organization.name">{{organization.name}}</option>
</select>
<br>
I find that the above code displays the following in my browser:
Notice how the default value is set in the above, but in the next drop down the default value isn't set:
sample.component.html
<select [(ngModel)]="seniorExperience" id="seniorExperience" required>
<option *ngFor="let seniorExperience of seniorExperiences" [value]="seniorExperience.seniorExperienceId" [ngValue]="seniorExperience.seniorExperienceName">{{seniorExperience.seniorExperienceName}}</option>
</select>
The browser displays the following:
Why is the second dropdown not populated with the a default, whilst following the same syntax? From searching and reading docs I presumed that [ngValue] sets the default value of the dropdown, which seems to work for the first dropdown. Is there a better way to set the default select?