Unable to show HTML select option initially when starting the page in Angular-CodePudding

in my ts file I've defined this :

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

in my HTML here is the code

<div  id="statusFilter">
      <label  for="statusFilter">Filter By Status:</label>
      <select
        [(ngModel)]="statusFilter"
        
        (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>

what appears in the Angular App is this empty select, my goal is to make the first tag show its value 'Choose Filter: ' before selecting anything

here is how it currently appears: enter image description here

and this is what I need it to appear desired result

and for information this is how the select list would appear if I click it, I would be able to see that disabled option inside of it only if clicked but not by default select list clicked

Any idea what i'm doing wrong in here ?

CodePudding user response：

you should fill statusFilter with "Choose" value in the "ts" file.

statusFilter = 'Choose';