Angular4 placeholder for a select

Question

I'm trying to add a placeholder to a select on Angular 4 but no way to make it works,

Here is my code :

<select name="edit" [(ngModel)]="edit">
        <option [ngValue]="null" disabled [selected]="true"> Please select one option </option>
        <option *ngFor="let select of list" [ngValue]="edit"> {{ select }}</option>
</select>


export class AppComponent  {
  list: any[] = ['1', '2', '3'];
  edit: any;
}

Answer 1

I have created plunker. Hope this will helps.

 <select name="edit" [(ngModel)]="edit">
    <option [ngValue]="undefined" disabled  selected> Please select one option </option>
    <option *ngFor="let select of list" [ngValue]="edit"> {{ select }}</option>
  </select>
export class AppComponent  {
  list: any[] = ['1', '2', '3'];
  edit: any;
}

Answer 2

can you try this, in template

<select name="edit" [(ngModel)]="edit">
    <option value=""> Please select one option </option>
    <option *ngFor="let select of list" value="{{select}}"> {{ select }}</option>
</select>

your component.ts

edit: string = '';

Answer 3

If you wish to have the placeholder selected by default:

<select name="edit" [(ngModel)]="edit">
    <option value="0" disabled selected>Select your option</option>
    <option *ngFor="let select of list" [value]="select"> {{ select }}</option>
</select>

DEMO

Answer 4

I know its an old question and an answer has been selected, however I felt there was one small improvement that I could add. Include 'hidden' on your placeholder and that should eliminate it being visible in the dropdown.

<select name="edit" [(ngModel)]="edit">
   <option value="0" disabled selected hidden>Select your option</option>
   <option *ngFor="let select of list" [value]="select"> {{ select }}</option>
</select>