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

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 3

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>

Answer 4

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 5

Instead of hacking your select's <options> , try using CSS to place text overlapping the box, and an *ngIf to hide that placeholder span when there's a value.

<div class="form-group rel">
    <span class="form-control placeholder" *ngIf="!fruitSelect.value">Fruit...</span>
    <select class="form-control" formControlName="fruitSelect" id="fruitSelect" #fruitSelect>
        <option *ngFor="let fruit of fruits" [value]="fruit.value">{{fruit.key}}</option>
    </select>
    <span class="err" *ngIf="hasErr('fruitSelect', 'required')">Fruit is required</span>
</div>

CSS:

.rel {
    position: relative;
}

.placeholder {
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    max-width: 90%; // don't cover the dropdown's arrow
    border-right: none;
}

The rel class just makes position:absolute work. pointer-events ensures the placeholder span won't eat mouse clicks. max-width ensures the opacity won't affect the underlying dropdown control's down arrow, and border-right is just undoing what form-control , a bootstrap class, did.

If you aren't using bootstrap then replace form-control with whatever you're using, but try putting that class on both the control and the placeholder span so their sizing and coloring match.

Angular uses the #fruitSelect template variable to check the value in the dropdown, which the placeholding span checks with *ngIf to know when to disappear.

Answer 6

we can add a dummy option as placeholder that can be hidden in option dropdown. We can add a custom dropdown icon as background that replaces browser dropdown icon.

The trick is to enable placeholder css only when value is not selected

Below code explains itself.

/**My Component Template*/

 <div class="dropdown">
      <select [ngClass]="{'placeholder': !myForm.value.myField}"
 class="form-control" formControlName="myField">
        <option value="" hidden >Select a Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>

/**My Component.TS */

constructor(fb: FormBuilder) {
  this.myForm = this.fb.build({
    myField: ''
  });
}

/**global.scss*/

.dropdown {
  width: 100%;
  height: 30px;
  overflow: hidden;
  background: no-repeat white;
  background-image:url('angle-arrow-down.svg');
  background-position: center right;
  select {
    background: transparent;
    padding: 3px;
    font-size: 1.2em;
    height: 30px;
    width: 100%;
    overflow: hidden;

    /*For moz*/
    -moz-appearance: none;
    /* IE10 */
    &::-ms-expand {
      display: none;
    }
    /*For chrome*/
    -webkit-appearance:none;
    &.placeholder {
      opacity: 0.7;
      color: theme-color('mutedColor');
    }
    option {
      color: black;
    }
  }
}