Angular 2, set default value to select option

Question

I try to add a default value to an option. It will be like a kind of placeholder and I use this method to do it. In pure HTML it work, but if I try to use *ngFor of angular 2 attribute, it doesn't select anything.

Here my code that I use in pure HTML:

  <select name="select-html" id="select-html">
    <option value="0" selected disabled>Select Language</option>
    <option value="1">HTML</option>
    <option value="2">PHP</option>
    <option value="3">Javascript</option>
  </select>

And using Angular template:

 <select name="select" id="select" [(ngModel)]="selectLanguage">
    <option *ngFor="let item of selectOption" 
      [selected]="item.value==0" 
      [disabled]="item.value==0">{{item.label}}</option>
  </select>

The class is

import {Component} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-form-select',
  templateUrl: 'default.component.html'
})
export class DefaultComponent {
  private selectOption: any;
  constructor() {
    this.selectOption = [
      {
        id: 1,
        label: "Select Language",
        value: 0
      }, {
        id: 2,
        label: "HTML 5",
        value: 1
      }, {
        id: 3,
        label: "PHP",
        value: 2
      }, {
        id: 4,
        label: "Javascript",
        value: 3
      }
    ]
  }
}

I want Select Languageto be selected as a default value. It's disabled but not selected.

How can I select it as a default value?

Live example

Answer 1

update

4.0.0-beta.6 added compareWith

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

compareFn(c1: Country, c2: Country): boolean {
   return c1 && c2 ? c1.id === c2.id : c1 === c2;
} 

this way the instance assigned to selectedCountries doesn't need to be the identical object, but a custom comparison function can be passed, for example to be able to match an different object instance with identical property values.

original

If you want to use an object as value you need to use [ngValue] on the option element.

  <select name="select" id="select" [(ngModel)]="selectLanguage">
    <option *ngFor="let item of selectOption" [ngValue]="item"
      [disabled]="item.value==0">{{item.label}}</option>
  </select>

When selectLanguage has an options value assigned [(ngModel)]="..." will this one make the one selected by default:

import {Component} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-form-select',
  templateUrl: 'default.component.html'
})
export class DefaultComponent {
  private selectOption: any;
  constructor() {
    this.selectOption = [
      {
        id: 1,
        label: "Select Language",
        value: 0
      }, {
        id: 2,
        label: "HTML 5",
        value: 1
      }, {
        id: 3,
        label: "PHP",
        value: 2
      }, {
        id: 4,
        label: "Javascript",
        value: 3
      }
    ];
    this.selectLanguage = this.selectOption[0];
  }
}

Answer 2

I find it nicer to remove the default option from the selectOption array and specifying the default unselectable option separately.

<select name="select" id="select" [(ngModel)]="selectLanguage">
  <option [ngValue]="undefined" disabled>Select Language</option>
  <option
         *ngFor="let item of selectOption"
         [value]="item.value"
  >
    item.label
  </option>
</select>