StackOverflower StackOverflower - 2 years ago 391
Javascript Question

How to set HTML select value with Angular 2

I want to set selected value from an HTML dropdown from a Angular2 component. I'm failing to see if this should be working or I need something more complex


<select class="form-control" id="role" [ngModel]="SelectedRole">
<option *ngFor="#option of Roles" [value]="option.Value">{{option.Text}}</option>


export class MyComponent extends Secured {
public SelectedRole: String = "4";


constructor() {

From this code, I'd expect ítem with value
to be selected at the begining and that's not happening.

Answer Source

Works for me

    selector: 'my-app',
    template: `
<select class="form-control" id="role" [ngModel]="selectedRole">
  <option *ngFor="let option of roles" [value]="option.value">{{option.text}}</option>
export class AppComponent {
  public selectedRole: String = "4";
  roles = [{value: '1', text: '1'}, {value: '2', text: '2'}, {value: '3', text: '3'}, {value: '4', text: '4'}]


Hint: *ngFor has a slightliy different syntax in beta.17 (let instead of #)

Plunker example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download