How to display input message in Angular drop down list?

November 30, 2022

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 class="row row-cols-3 pt-3">
   <div class="col text-end">
      <!-- Country -->
      <label class="form-label">Country</label>
   </div>
   <div class="col-4">
      <select class="form-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

>Solution :

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 class="col-4">
      <select class="form-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!