How to Set Default Selected Value of Ion-Option

How to set default selected value of ion-option?

If you deal with default value xor objects, the cleanest way is to provide a compare function to the [compareWith] attribute. This function takes 2 objects in parameters and returns true if they are equals. This way, existing values in model will be selected at start. This works too if new data are added in model outside of the select.

Following example is taken from official Ionic doc

<ion-item>
  <ion-label>Employee</ion-label>
  <ion-select [(ngModel)]="employee" [compareWith]="compareFn">
    <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
  </ion-select>
</ion-item>

compareFn(e1: Employee, e2: Employee): boolean {
  return e1 && e2 ? e1.id == e2.id : e1 == e2;
}

EDIT : using double equals make it work for Ionic 4 (as Stan Kurdziel suggests in comment)

Ionic Select, change default selected option from script

Give something like this a try:

<ion-select (ionChange)="changeStartpoints($event)" interface="popover">
    <ion-option value="1" selected="{{startpoints === 170}}">1</ion-option>
    <ion-option value="2" selected="{{startpoints === 501}}">2</ion-option>
</ion-select>

My guess is your version may have worked if you changed your selected to [selected] too

Set default value of ion-select in React / Ionic 5

The default value is specified in the IonSelect tag as such:

  <IonSelect id="category" name="group" ref={register} value={noGroup}>

You can see it in the docs:

        <IonSelect value={hairColor} okText="Okay" cancelText="Dismiss" onIonChange={e => setHairColor(e.detail.value)}>
              <IonSelectOption value="brown">Brown</IonSelectOption>
              <IonSelectOption value="blonde">Blonde</IonSelectOption>
              <IonSelectOption value="black">Black</IonSelectOption>
              <IonSelectOption value="red">Red</IonSelectOption>
            </IonSelect>

Also as a side note, just in case you still haven't spotted it, it usually helps to see the code of the provided example on the top right, which you can do by clicking the View Source.

How to get Ion-select to show the default value on form load with reactive form

I found the answer based on @Priya comment. I had several selects with "static" options:

<ion-select type="input" name="country_id" formControlName="country_id">
   <ion-option value="CA">Canada</ion-option>
   <ion-option value="US">United States</ion-option>
</ion-select>

Changing them to use an *ngFor fixed those:

in the .ts file:

public countryOptions = [
   { value: 'CA', displayValue: 'Canada' },
   { value: 'US', displayValue: 'United States' }
];

and in the .html file:

<ion-select type="input" name="country_id" formControlName="country_id">
   <ion-option *ngFor="let country of countryOptions" value="{{ country.value }}">{{ country.displayValue }}</ion-option>
</ion-select>

I should note that with one of the Ionic Updates, something was fixed (I don't know what), but suddenly some of the selects that did work several months ago, started working again.

In all the other selects, it was basically some combination of using *ngFor

Please note that I just typed the code into this answer, so there may be a few typos... but the answer is that using the *ngFor for the options fixes everything.

How to set default selected value of multiple options(ion-select)

So the issue was the object array. I don't believe Ionic can handle them so I changed the array to this:

private totalPPE:any = ["Gloves",                        "Glasses/Goggles/Face-Shield",                        "Hard Hat",                        "Hearing Protection",                        "FR Attire",                        "Steel Toe Boots",                        "Fall Protection",                        "H2S Monitor",                        "Respiratory Protection",                        "Other"];

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

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>

---

Related Topics