CODEWITHSUNDEEP
javascriptangularionic-framework
calljhon
calljhon

Reputation: 72

How to set selected item in a dynamic options list in angular

I'm getting very confused with this, what I'm trying to do is to show a "pre-selected" option in a dynamic options list that I create by using ngFor angular directive in my ionic app

Right now I have this

  <ion-item>
    <ion-label>Number of Guests</ion-label>
    <ion-select>
      <ion-option *ngFor="let person of gests" value="{{person.id}}" selected="{person.id[2]}">{{person.id}}</ion-option>
    </ion-select>
  </ion-item>

as you can see, I'm trying to show an item as pre-selected before the user picks one. But I don't have very clear how to do it. Any idea for this?

Upvotes: 0

Views: 5278

Answers (2)

zelda11
zelda11

Reputation: 423

You can add an index to the loop, so you can choose which option will be the default just specifying the index:

<select>
  <option *ngFor="let person of gests; let idx = index" 
  [selected]=" idx == 0 ? true : false"></option>
</select>

Upvotes: 0

Mixalloff
Mixalloff

Reputation: 837

Tou can use ngModel in ion-select component

// html
<ion-select [(ngModel)]="selectedPerson">...

// ts
selectedPerson = gests[0].id;

Upvotes: 0

Related Questions