How do I display blank dropdown values upon loading an Angular form?

I have built a form in Angular using ReactiveFormsModule that uses primarily dropdown boxes via the <select> element.

Each <select> is databound to an Angular FormControl instance; upon loading the webpage the dropdown menus are automatically loaded with a value from a REST API call, but what I want is for them to display a blank entry until the user manually clicks the dropdown and selects one of the options below.

Is there a way to do using the ReactiveFormsModule?

>Solution :

You could just add an option in the select directly in the template. If you want, you could also use *ngIf on that option to remove it once you receive your data. Something like this maybe:

<mat-select>
  <mat-option *ngIf="!data" [value]="null">
    Loading...
  </mat-option>
</mat-select>