Dynamically populating an ion-select

Ionic Framework ionic-v3
1

I’m using the conference app as a boilerplate.

The following is included in the conference app and populates the navigation
<ion-list> <ion-list-header> Navigate </ion-list-header> <button ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)"> <ion-icon item-left [name]="p.icon"></ion-icon> {{p.title}} </button> </ion-list>

Can someone explain why the following won’t work? I’m trying use the same data and present it in an ion-select

<ion-list> <ion-list-header> Navigate Select </ion-list-header> <ion-select> <ion-option *ngFor="let p of appPages" [value]="p.index"> {{p.title}} </ion-option> </ion-select> </ion-list>

2

Apparently having a ion-select in the sidebar just doesn’t work.

That thread has a workaround to the problem, but I’m just going to avoid using a select list entirely and pursue another workaround.

Ideally, the ion-select would work in the side menu by default.

3

Hi Mike,

ion-select works in side menu, you just need to move side menu from app.html, it should be part of some page.

You can see result on next image from my app:

image
Screenshot_20160802-182018.png1080×1920 57.5 KB

4

Filters on a side menu, good idea, but how did you manage to set it on a specific page, can you show the code please. Thanks

5

Sorry I don’t have time right now to show you some code. I will reply you tomorrow, if I forgot send me a message to remind me :slight_smile:

6

Does the side menu code currently in app.html need to be added to each page?

I’m new to ionic, so I don’t know how to do that while avoiding code duplication.

Thanks.

7

@MikePugs I have left menu in app.html, in that menu I have only navigation, so no ion-select. If you need ion-select in side menu which is visible on every screen that you have a problem :slight_smile: