Angular 8 drop down selected option not showing, how come?

Question

This question has been asked frequently. My situation is apparently different from all the others as I can't find a solution for it from the existing answers.

I have this code:

<form (ngSubmit)="getExceptions(f)" #f="ngForm">
          <div class="row">
            <div class="form-group col-xs-3 col-sm-3">
              <label class="col-form-label" for="aantal">Aantal meldingen per pagina?</label>
              <select name="selectedQuantity" id="aantal" class="form-control" ngModel>
                <option *ngFor="let option of options" [value]="option">{{option}}</option>

              </select>
            </div>
.
.
.
</form>

options is defined as:

private options: string[] = ['10', '20', '50'];

I would like to show "10" as the default selected value but whatever I do the drop down keeps showing a blank for the selected value. Clicking the drop down shows the values 10, 20 and 30. So it is filled properly.

What did I try:

<option *ngFor="let option of options" [value]="option" [selected]="option==10">{{option}}
</option>

and

<option [value]="10" [selected]="true == true">10</option>
<option [value]="20">20</option>
<option [value]="50">50</option>

and

<option [value]="10" selected>10</option>
<option [value]="20">20</option>
<option [value]="50">50</option>

It has something to do with the binding because if I remove the 'ngModel' from the select tag it shows the value I want to use as the default value (10). Sort of. I can't read the selected value anymore but the default value is showing.

I have never done anything with plunkr but will try to get an example working there and then paste a link to that in here.

Solution 1

Try setting ngModel like this:

.ts

  private options: string[] = ["10", "20", "50"];
  selectedQuantity = "10";

.html

<select name="selectedQuantity" id="aantal" class="form-control" [(ngModel)]="selectedQuantity">
    <option *ngFor="let option of options" [value]="option" >{{option}}</option>
</select>

Working Demo

Solution 2

Since We just want a placeholder for our select tag why not just try a different approach.

Using disabled attribute somehow makes angular ignore it. Which then perfectly works as placeholder.

<select class="form-select" name="NAME" ngModel>
   <option value="" disabled selected>Select text</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

Solution 3

just assign value to a select

 <select [value]="10" ngModel>
 ...

Solution 4

use like below

<option [value]="10" [selected] ="true">10</option>

you have to use select as a property binding.

let me know if it helps

Solution 5

You can use ngModel for select with default value in one variable assigned to it as -

    <select name="selectedQuantity" id="aantal" 
      class="form-control" [(ngModel)]="selectedOption">
      <option *ngFor="let option of options" [value]="option">
           {{option}}
           </option>
     </select>

and value will be is as - selectedOption: string = '10';

View more solutions