Angular2 [selected] does not work to set up the default value?

Question

I'm trying to set up default value for my selection so I tried

[selected]= "selected_choice == 'one'"

something like this

but this didn't work.

People said [selected] no longer works so I also tried [attr.selected] but didn't work as well..

this is my whole code for one select tag

  <select (change)="passValue3()" formControlName="school" class="form-control" required [(ngModel)]="selected_student" class="selectionbox">
    <option *ngIf="selected_student == undefined">학년 선택</option>
    <option *ngFor="let gradetype of gradeTypes" [ngValue]="gradetype" [attr.selected] = "gradetype.gradeType === 'Middle'">{{gradetype.gradeName}}</option>
</select>

How can I set up the default option for the select?

this is based on what you bind to `option`, see https://stackoverflow.com/questions/44044746/selected-of-select-doesnt-work-as-excepted-in-angular2, also https://stackoverflow.com/questions/44042797/angular-2-set-selected-on-a-select-option-dropdown/44043801#44043801 for more info. — Pengyy, Jun 16 '17 at 08:37

Ketan Akbari · Answer 1 · 2017-06-16T09:00:42.850

8

You need to do something like this:

In Markup:

<select placeholder="Sample select" [(ngModel)]="selectedItem">
                    <option [value]="'all'">View All</option>
                    <option [value]="'item-1'">Item-1</option>
                    <option [value]="'item-2'">Item-2</option>
                </select>

In Component

  selectedItem='all'

edited Jun 16 '17 at 09:00

answered Jun 16 '17 at 08:44

Ketan Akbari

10,837
5
31
51

1

Worked for me. Thanks. – himanshupareek66 Jan 14 '18 at 11:01

Vinit Solanki · Answer 2 · 2019-05-13T09:38:48.277

you compare options to select by compareWith property, If you are using angular 4, may be it will not working on angular 2.

HTML File :

<select [compareWith]="byAnimal" [(ngModel)]="selectedAnimal">  
  <option *ngFor="let animal of animals" [ngValue]="animal">
    {{animal.type}}
  </option>
</select>

TS File

byAnimal(item1,item2){
  return item1.type == item2.type;
}

One of the best solution from this link

score 0 · Answer 3 · answered Nov 03 '17 at 11:55

Here is my solution:

Example is about time zones. From the backend I got the next object item:

activeItem = { "timezone": { "timeZoneHolder": "Europe", "region": "Europe/Paris (CEST)", "UTC": "UTC+1"  }}

And the same item from my model looks a little bit different as source is change:

{ "timeZoneHolder": "France", "region": "Europe/Paris", "UTC": "UTC +01:00" }

As you see a little bit different.

So here is my model:

timeZones = [{ "timeZoneHolder": "France", "region": "Europe/Paris", "UTC": "UTC +01:00" }, { "timeZoneHolder": "French Polynesia", "region": "Pacific/Gambier", "UTC": "UTC -09:00" }]

And here is the mark-up for the select, works like a charm :

<select id="timezone" name="timezone" [(ngModel)]="activeItem.timezone">
<option [ngValue]="activeItem.timezone" [selected]="true" disabled hidden>{{activeItem.timezone.region}}</option>
<option *ngFor="let timeZone of timeZones"
        [ngValue]="{timeZoneHolder: timeZone.countryName, region: timeZone.timeZone, UTC: timeZone.UTC}">
    {{timeZone.timeZone}}
</option>

Enjoy :)

Angular2 [selected] does not work to set up the default value?

3 Answers3