How to set HTML select value with Angular 2

Question

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

HTML

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

COMPONENT

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

    ...

    constructor() {
    }
}

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

Günter Zöchbauer · Accepted Answer · 2016-04-29 13:07:38Z

3

Works for me

@Component({
    selector: 'my-app',
    template: `
    <h1>Hello</h1>
<select class="form-control" id="role" [ngModel]="selectedRole">
  <option *ngFor="let option of roles" [value]="option.value">{{option.text}}</option>
</select>
    `,
})
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

answered Apr 29, 2016 at 13:07

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thierry Templier · Accepted Answer · 2016-04-29 13:08:46Z

1

This should work like you did. Notice that could put your select within a form element:

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

See this plunkr: https://plnkr.co/edit/J1aVclVcjJPqm1Qx9j0j?p=preview.

answered Apr 29, 2016 at 13:08

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

1 Comment

Thierry Templier Over a year ago

Which version of Angular2 do you use?

BitfulByte · Accepted Answer · 2017-10-21 18:47:55Z

1

It's hard to find answers for particular angular versions... so while searching for this issue while using a more recent version (angular 4.4.5), I've stumbled upon this thread. However none of the answers work for me so here is my solution for newer versions, in case someone else might stumble upon this thread too :-)

<select class="form-control" [(ngModel)]="size" name="sizeValue" #sizeValue="ngModel">
  <option *ngFor="let size of sizes" [value]="size">{{size}}</option>
</select>

In particular this part: name="sizeValue" #sizeValue="ngModel" on the select element.

answered Oct 21, 2017 at 18:47

BitfulByte

4,5661 gold badge36 silver badges42 bronze badges

1 Comment

Jnr Over a year ago

Thanks. I agree about the angular versions when trying to find something for angular 4 or higher. BTW your comment was my solution.

Collectives™ on Stack Overflow

How to set HTML select value with Angular 2

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related