en mi archivo ts he definido esto:

 statuses = [ { id: 1, name: "Approved" }, { id: 2, name: "Created" }, { id: 3, name: "Rejected" }, { id: 4, name: "Cancelled" }, ];

en mi HTML aquí está el código

 <div class="col-1" id="statusFilter"> <label class="font-weight-bold text-secondary" for="statusFilter">Filter By Status:</label> <select [(ngModel)]="statusFilter" class="form-control" (change)="setStatusFilter()"> <option value="'Choose'" disabled selected><strong> Choose Filter: </strong></option> <option *ngFor="let status of statuses" [value]="status.name"> {{ status.name }} </option> </select> </div>

lo que aparece en la aplicación Angular es esta selección vacía, mi objetivo es hacer que la primera etiqueta muestre su valor 'Elegir filtro:' antes de seleccionar cualquier cosa

así es como aparece actualmente: ingrese la descripción de la imagen aquí

y esto es lo que necesito para que aparezca el resultado deseado

y para obtener información, así es como aparecería la lista de selección si hago clic en ella, podría ver esa opción deshabilitada dentro de ella solo si se hace clic, pero no se hace clic en la lista de selección predeterminada

¿Alguna idea de lo que estoy haciendo mal aquí?