How to show placeholder (empty option) in select control in Angular 2?

Question

I have this code in my template:

<select [ngModel]="selectedSubSectionId" (ngModelChange)="onSubSectionChange($event)">
  <option *ngFor="let subSection of event.subSections" [ngValue]="subSection.id">{{ subSection.name }}</option>
</select>

In my component:

public selectedSubSectionId: any;

public onSubSectionChange(subSectionId: any) {
  // some code I execute after ngModel changes.
}

This works ok, but at the beginning I have an empty box. I want to show a placeholder message there. How can I do this using ngModel?

MeTTe · Accepted Answer · 2017-01-02T11:04:56.557

33

My solution:

In the component typescript file I add a property selectUndefinedOptionValue that I don't initialize and in the html I add the undefinedSelectOptionValue as value of the placeholder option. This solution works for both number and string model properties.

@Component({
  selector: 'some-component-selector',
  templateUrl:'url to template',
})
export class SomeComponent implements OnInit {
    private selectUndefinedOptionValue:any;
    private someObject:SomeObject;
    
    ngOnInit() {
      someObject = new SomeObject();
    }
}

<select [(ngModel)]="someObject.somePropertyId">
  <option disabled hidden [value]="selectUndefinedOptionValue">-- select --</option>
  <option *ngFor="let option of options" [value]="option.id">option.text</option>
</select>

edited Jan 02 '17 at 11:04

answered Dec 23 '16 at 15:04

MeTTe

354
3
3

1

@FranziskusKarsunke MeTTe guys, can anybody explain how this magic works plz? thanks – mondayguy Jun 19 '17 at 14:41
This doesn't work on Chrome Version 60.0.3112.90 which I'm using to look at the snippet. – nclarx Aug 12 '17 at 02:56
4

Works on Chrome 60.0.3112.113 with – Gil Sep 10 '17 at 14:47
It doesn't work (value or ngValue, undefined or null) with Chrome Version 61.0.3163.100 or Version 62.0.3202.75, or Opera. – Maxxx Nov 06 '17 at 02:10
--select-- does seem to work (tested on above Chrome builds, plus Opera and Edge. (i.e. 11 doesn't even display my test form!) – Maxxx Nov 06 '17 at 02:24
You can slim this down further by putting `undefined` as the value instead of the variable: `` – RonanCodes Mar 27 '20 at 16:07

score 14 · Answer 2 · answered Sep 07 '17 at 10:48

I've the same question, and i found an example in this great website: Angular Quick Tip

also, i put the example below:

// template
<form #f="ngForm">
  <select name="state" [ngModel]="state">
    <option [ngValue]="null">Choose a state</option>
    <option *ngFor="let state of states" [ngValue]="state">
      {{ state.name }}
    </option>
  </select>
</form>

//component
state = null;

states = [
  {name: 'Arizona', code: 'AZ'},
  {name: 'California', code: 'CA'},
  {name: 'Colorado', code: 'CO'}
];

Also works with Reactive Forms, that's what i'm using:

// template
<div class="form-group">
  <select formControlName="category">
    <option [ngValue]="null">Select Category</option>
    <option *ngFor="let option of options" 
            [ngValue]="option">{{option.label}}</option>
  </select>
</div>

// component
options = [{ id: 1, label: 'Category One' }, { id: 2, label: 'Category Two' }];

form = new FormGroup({
  category: new FormControl(null, Validators.required)
});

Thanks to Netanel Basal to provide the answer

I would recommend adding the `disabled` attribute to the ` – rynop Mar 01 '19 at 17:27 — rynop, Mar 01 '19 at 17:27

score 9 · Answer 3 · edited May 02 '17 at 22:02

9

Add empty option and set to 'undefined' also can be add for null value too

<select [(ngModel)]="barcode">
  <option value="undefined" disabled selected hidden>Select</option>
  <option value="null" disabled selected hidden>Select</option>
  <option *ngFor="let city of turkiye" [ngValue]="city.id">{{city.name}}</option>
</select>

edited May 02 '17 at 22:02

Paul Roub

35,100
27
72
83

answered May 02 '17 at 21:47

Serkan KONAKCI

524
6
7

1

Caution: Safari and IE11 will show two entries with this solution! – Franziskus Karsunke Jul 25 '17 at 10:48
How about ` – B2K Mar 19 '18 at 15:20
@B2K I had hoped this would work in Angular 11, but it does not... – DARKGuy Dec 09 '20 at 03:19
Another option might be to initialize your model variables, so that they are all defined, thus barcode would be either '' or null but not undefined. – B2K Dec 09 '20 at 15:38

score 6 · Answer 4 · edited Nov 15 '16 at 14:35

6

try this code:

<select [ngModel]="selectedSubSectionId? selectedSubSectionId : ''" (ngModelChange)="onSubSectionChange($event)">
   <option value="" disabled selected hidden>Placeholder</option>
   <option *ngFor="let subSection of event.subSections" [value]="subSection.id">{{ subSection.name }}</option>
</select>

edited Nov 15 '16 at 14:35

Mahendra Gunawardena

1,864
5
23
42

answered Nov 15 '16 at 11:06

Rodion Golovushkin

211
2
10

How to show placeholder (empty option) in select control in Angular 2?

4 Answers4

Linked