CODEWITHSUNDEEP
angularionic3
Madhuri Rahane
Madhuri Rahane

Reputation: 41

ionic 3: How to set <ion-option> as selected?

How do I set an option as selected in a dynamically generated select control with ionic 3 and angular?

I'm trying to set "Select State" as default selected option if it is not selected previously but i am unable to do that.

<ion-item>
<ion-label stacked color="primary">State</ion-label>
<ion-select [(ngModel)]="signup.state" name="state" #state = "ngModel" (ionChange)="getcitylist(signup.state)" placeholder="Please Select State">
    <ion-option *ngIf="signup.state==0" value="0" [selected]="true">Select State</ion-option>
    <ion-option *ngFor="let state of statelist" value="{{state.state_id}}">{{state.state_name}}</ion-option>
</ion-select>

The problem comes with how to set an option as selected, I can't seem to figure that one out.

Upvotes: 1

Views: 6247

Answers (1)

Krishna Rathore
Krishna Rathore

Reputation: 9687

use [value]="state.state_id" instead of value="{{state.state_id}}"

Stackblitz Demo

<ion-item>
<ion-label stacked color="primary">State</ion-label>
<ion-select [(ngModel)]="signup.state" (ionChange)="getcitylist(signup.state)" placeholder="Please Select State">
    <ion-option *ngIf="signup.state==0" value="0" [selected]="true">Select State</ion-option>
    <ion-option *ngFor="let state of statelist" [value]="state.state_id">{{state.state_name}}</ion-option>
</ion-select>

Upvotes: 2

Related Questions