Replace a select input with a text box

See more:

HTML5

AngularJs

I have the following select whose items are being obtained using an API call. Now I need that in case the API call fails and no items are returned to replace this select with an input text box to allow the use to enter freetext. Any idea why its not working?

<div class="col-xl-8">
  <select id="region" name="region" class="form-control" [(ngModel)]="player.region">
    <option class="dropdown-item" [ngValue]="null"><Empty></option>
    <option class="dropdown-item" *ngFor="let region of regions" id="region" [ngValue]="region">{{region.regionName}} ({{region.regionCode}})</option>
  </select>
</div>

What I have tried:

I have tried the following

<div class="col-xl-8">
    <ng-container *ngIf="region.length; then regionList; else freeText">
    </ng-container>

    <ng-template #regionList>
        <select id="region" name="region" class="form-control" [(ngModel)]="player.region">
            <option class="dropdown-item" [ngValue]="null"><Empty></option>
            <option class="dropdown-item" *ngFor="let region of regions" id="region" [ngValue]="region">{{region.regionName}} ({{region.regionCode}})</option>

        </select>
    </ng-template>

    <ng-template #freeText>
        <input type="text" class="form-control" [(ngModel)]="player.region" id="region" name="region" placeholder="Region">
    </ng-template>
</div>