Ionic 4 ion-select pre select value

I have an ion-select that the selected value is coming from a sqlite database, meaning the value for [(ngModel)] is being populated async. In ionic v3 this would still work and would select the correct ion-option, with v4 it doesn’t. Is there any way to get this to work?

 <ion-select [(ngModel)]="selectedCodeValue" name="selectCode" multiple="false"
        (ionChange)="codeSelected()" required >
        <ion-select-option *ngFor="let code of availableCodes" value="{{code.id}}">
          {{code.id}} -  {{code.description}}
        </ion-select-option>
  </ion-select>

In the above snippet the “selectedCodeValue” gets populated async from sqlite db.

I just double checked and it has nothing to do with async data load or not. Even when I used a hard coded variable it still didn’t show the selected value until I clicked on the select, that’s when the selected value is automatically selected.

As a workaround I put the value in the ion-select placeholder attribute. That worked but it feels like a hack

<ion-select [(ngModel)]="selectedCodeValue" name="selectCode" multiple="false" [placeholder]="selectedCodeValue ? selectedCodeValue : 'Tap to select..'"
        (ionChange)="codeSelected()" required >
        <ion-select-option *ngFor="let code of availableCodes" value="{{code.id}}">
          {{code.id}} -  {{code.description}}
        </ion-select-option>
  </ion-select>
1 Like

Ok I finally got it to work. I was missing the selectedText attribute. Now it works as expected

<ion-select [(ngModel)]="selectedCodeValue" name="selectCode" 
  multiple="false" placeholder="Tap to select.." [selectedText]="selectedCodeValue"
  (ionChange)="codeSelected()" required >
        <ion-select-option *ngFor="let code of availableCodes" value="{{code.id}}">
          {{code.id}} -  {{code.description}}
        </ion-select-option>
  </ion-select>
6 Likes

1 more thing that I noticed, putting it here if anyone runs into this issue.

When it’s a multiselect (multiple=true) and you set [selectedText]=“selectedCodeValue” it will display 1 long string instead of comma separated string. The way I avoid it is as follows

<ion-select [(ngModel)]="selectedCodeValue" name="selectCode" 
  multiple="true" placeholder="Tap to select.."
  [selectedText]="selectedCodeValue ? selectedCodeValue.toString() : selectedCodeValue"
  (ionChange)="codeSelected()" required >
        <ion-select-option *ngFor="let code of availableCodes" value="{{code.id}}">
          {{code.id}} -  {{code.description}}
        </ion-select-option>
  </ion-select>
4 Likes

set the value property of the ion-select to accomplish the ion-select-option being selected.

<ion-select [(ngModel)]=“selectedCodeValue” name=“selectCode” multiple=“true” placeholder=“Tap to select…” [value]=“selectedCodeValue” (ionChange)=“codeSelected()” required>
<ion-select-option *ngFor=“let code of availableCodes” value="{{code.id}}">
{{code.id}} - {{code.description}}

1 Like

Hope this helps
In html file:


<ion-content padding>
  Select one
    <ion-select name="category" [selectedText]="selectcategory" [(ngModel)]="selectcategory" (ionChange)="codeSelected()" >
        <ion-select-option value="1" >Category 1</ion-select-option>
        <ion-select-option value="2">Category 2</ion-select-option>
        <ion-select-option value="3">Category 3</ion-select-option>
        </ion-select>
        
</ion-content>

In ts file


export class TestcodePage implements OnInit {
  selectcategory:any;
  selectcategory1:any;
  constructor() {
    this.selectcategory="Category 2";
    //this.selectcategory=1;
  }

  ngOnInit() {
  }
  codeSelected(){
    switch(this.selectcategory)
    {
      case "1": 
      this.selectcategory="Category 1";
      break;
      case "2": 
      this.selectcategory="Category 2";
      break;
      case "3": 
      this.selectcategory="Category 3";
      break;
    }
  }
}
2 Likes

Tks brother i spended hours looking how to work arround with it. You rock…

Thanks man, it works.
The [selectedTex] seems to do the trick.
Thank you for saving me a lot of time.

Try this method it works.
Nationality

              <ion-select formControlName="nationality" [value]="nationalid" interface="action-sheet" (ionChange)="changeNationality()">

                <ion-select-option *ngFor="let nationality of nationalityList" [value]="nationality.id">

                  {{nationality.nationality}}</ion-select-option>

              </ion-select>

hey @javasol thanks for posting your solution. this works for showing the string but when I open the action sheet it actually doesn’t show the selected values as selected (I’m having a multiselect option and I expect to see that when I open it the fetched values are already selected)
PS: this used to work when I could use the select property of the IonSelectOption but in Ionic 5 they removed support for that property)