In my angular application I'm using a select control for the users to make a seletion filling the option in a *ngFor loop. For the first call (or until the users set an actual value) the selection is empty, once the selection is made they can change the value but cannot set it back to "empty". This is how it was designed and works until angular 8.
Until ng 8 my code looked like this, having no preselected entry in the select control as long as someValue was empty:
<select [value]="someValue" (change)="onSelectionDataChanged($event.target.value)">
<option *ngFor="let option of options" [value]="option"> {{ option }} <option>
</select>
With ivy it is no longer possible to use <select [value]=...> together with <option *ngFor=...> (see https://angular.io/guide/ivy-compatibility-examples#select-value-binding) but the solution presented there always selects the first entry even if someData is empty. This has two downsides: 1. The display implies the first entry was selected what is not true and 2. to actually select the first entry (and save the selection for use in the back-end) the user now has to select 2nd entry first and then select 1st entry.
The modified code (as suggested in angular guilde) looks like this:
<select (change)="onSelectionDataChanged($event.target.value)">
<option *ngFor="let option of options" [value]="option" [selected]="option === someValue"> {{ option }} <option>
</select>
A workaround would be to add an emty string to the options array but this enables the users to completely remove their selection.
Is there a way to have a selct with empty preselection in ivy?
