Angular 2, set default value to select option
Try below sample code for this:
Replace yourValue
with whatever value you want to select default
<select placeholder="country" >
<option *ngFor="let country of countriesList" [ngValue]="country" [selected]="country.country_name == yourValue" >
{{country.country_name}}
</option>
</select>
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>
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];
}
}