Ionic 2 - Ion-Select - How to select an option by default?

Question

See the following code:

<ion-item no-lines no-padding [ngClass]="{'ddl-selected': (detailedNote.content.m1spasm.tmj)}">
  <ion-select [(ngModel)]="detailedNote.content.m1spasm.tmj" class="ddl-custom">
    <ion-option [value]="''">TMJ</ion-option>
    <ion-option [value]="'TMJ left'">TMJ Left</ion-option>
    <ion-option [value]="'TMJ right'">TMJ Right</ion-option>
    <ion-option [value]="'TMJ bilateral'">TMJ Bilateral</ion-option>
  </ion-select>
</ion-item>

Is there any way that I could set an option by default? Like in the following example:

<option value="audi" selected>Audi</option>

I need to select the first option as a default: TMJ. How can I do this?

Answer 1

@Emi you can set detailedNote.content.m1spasm.tmj modal value in ts file

Answer 2

Avoid using words with blank spaces for the values, and since they are static values, you can use the value attribute directly (instead of the angular property [value]):

<ion-item no-lines no-padding [ngClass]="{'ddl-selected': (detailedNote.content.m1spasm.tmj)}">
  <ion-select [(ngModel)]="detailedNote.content.m1spasm.tmj" class="ddl-custom">
    <ion-option value="tmj">TMJ</ion-option>
    <ion-option value="tmj_left">TMJ Left</ion-option>
    <ion-option value="tmj_right">TMJ Right</ion-option>
    <ion-option value="tmj_bilateral">TMJ Bilateral</ion-option>
  </ion-select>
</ion-item>

So now in order to select the first option by default (the one with the value attribute equal to tmj), in the constructor or in any other function from the component, initialize the detailedNote.content.m1spasm.tmj property with that value:

constructor(...) {
  this.detailedNote.content.m1spasm.tmj = 'tmj';
}

Answer 3

To select an ion-option by default, you could use the selected property, just like a html5 option tag:

<ion-select> <ion-option value="AL">Albania</ion-option> <ion-option value="YE" selected>Yemen</ion-option> <ion-option value="AF">Afghanistan</ion-option> </ion-select>