How to display input message in Angular drop down list?-CodePudding

In my drop-down list, I would like to write: "Please select your country".

I added this line:

<option selected disabled value="">Please select your country</option>

But, I still have the same problem, nothing is displayed. The message "Please select your country" is not displayed.

Is this an Angular or HTML issue? Because I have no idea...

<div >
   <div >
      <!-- Country -->
      <label >Country</label>
   </div>
   <div >
      <select  [(ngModel)]="search.country">
      <!-- Please select your country -->
      <option selected disabled value="">Please select your country</option>
      <option *ngFor="let country of countries" [value]="country.id">{{ country.name }} </option>
      </select>
   </div

CodePudding user response：

You can set a default value to search.country as null in component.ts file.
And then set value as null to Please select your country option like below:

In component.ts file

search.country = null;

In HTML:

 <div >
      <select  [(ngModel)]="search.country">
      <!-- Please select your country -->
      <option selected disabled value="null">Please select your country</option>
      <option *ngFor="let country of countries" [value]="country.id">{{ country.name }} </option>
      </select>
   </div

Also try this way as well if not worked
<option selected [value]="null">Please select your country</option>

Hope this help. Thanks!