ion-select-option not choosing selected option when it is specified

Question

I am currently using ionic 4 and I am using the ion-select and ion-select-option tags in html side.

After looking at the documentations when I try to use the selected=true in the ion-select-option it doesn't default to that option chosen. Is there anything that i'm missing or doing wrong?

Here is how my code looks like in the HTML side. I only binded the ngModel on the ts side and nothing else

<ion-select class="ion-select" [(ngModel)]="dialCode">
       <ion-select-option value="+1" selected=true>+1</ion-select-option>
       <ion-select-option value="+852">+852</ion-select-option>
       <ion-select-option value="+86">+86</ion-select-option>
</ion-select>

sebaferreras sebaferreras · Accepted Answer · 2019-06-26T04:26:36

The issue is that you're binding the ion-select to the dialCode property

... [(ngModel)]="dialCode" ...

So instead of using selected=true, you need to initialize that property with the value that you want to be shown by default. So in your component you could do something like this for example:

// Angular
import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"]
})
export class HomePage implements OnInit {

  public dialCode: string = '+1'; // <--- Initialize the property

  constructor(...) {}

  // ...

}

And then in the view:

<ion-select class="ion-select" [(ngModel)]="dialCode">
  <ion-select-option value="+1">+1</ion-select-option>
  <ion-select-option value="+852">+852</ion-select-option>
  <ion-select-option value="+86">+86</ion-select-option>
</ion-select>

ion-select-option not choosing selected option when it is specified

1 Answers