feat: allow custom templates in overlay components

[windwp]

Ionic version: "@ionic/angular": "^4.2.0",

Feature Request

I use an html template with tag ion-select-option and It always render to plain text not html.

  <ion-select class="account-select" placeholder="Select One">
    <ion-select-option [value]="acc" *ngFor="let acc of specialAccounts">
      <span>
        {{acc.public_title}}
      </span>
      <span *ngIf="acc.id==='0'" class="font-bold">
        {{acc.currency}}
      </span>
    </ion-select-option>
  </ion-select>

Describe Preferred Solution Render html not text in ion-select-option

[liamdebeasi]

Hi there,

Thanks for the feature request! Could you describe your use case a bit more? We are interested in the use case where developers may not want to follow the Material Design or iOS guidelines. Also, how is this different from just using a modal?

Thanks!

[zakton5]

@liamdebeasi I personally want this just to shed a little more light on the options I have in a select-option. For example, I might have a set of roles that an admin can give another user and I want to quickly clarify what those roles can do with sub-text, much like multiline ion-items. Admin: Create, Read, Edit, Delete, 'Standard User:Read`. Sure, I could do this with a modal, but that's a lot more work.

[Schwankenson]

Would like to see this feature, too. Are there plans? It`s connected to this feature request I think: https://github.com/ionic-team/ionic/issues/16718

Would be great to be a bit more flexible with those elements: I need to explain my users the options and need a subtext for it.

[RafaelKr]

Hi, I also would like to see this feature. My use case would be to display an Avatar in front of the ion-select-option. At least in the Popup List.

Also it would be nice to customize the currently selected value, when the popup is closed. For example to just show the Avatar and no text or vice versa, but that wouldn't be really important to me right now.

[JCardenas2018]

f

[AFsupply]

Hi guys,

I also want this feat, my use case would be to display several property, like one name, one zipcode and one part of an email properly. We can do that now, but it just really ugly. Without this information the user have a chance to have a doubt about his selection (property can be in double in databse). I dream of a grid inside my select!.

Thx guys

[fradali]

I think this feature is interesting !

[cumpstey]

My use case for this is that I want to display scientific terms rendered with KaTeX in the select options. Examples of the kind of thing I'm meaning can be seen in the list of AQA A-level topics - see 3.1.6, which includes Kc, which should have subscript c.

I've noted the new IonicSafeString feature, and was expecting that to work universally - but it's not been applied to select options.

[ShaggyDude]

I would like this as well. I have a selector that changes countries and am having trouble passing down custom classes to show flag icons.

[saostad]

this is a handy feature, and in my view the current limitation is unnecessary. could you please add this to your roadmap?

[EinfachHans]

@saostad it is currently added for Milestone 6.0.0. I hope it will be included 😃

[liamdebeasi]

Hi everyone,

I wanted to provide a brief update on this issue. With Ionic 6 we will be adding the ability to use ion-modal and ion-popover declaratively in your component template. That means you can write <ion-modal> directly without having to use modalController (though modalController will still be available). Part of this change means that we need to use Web Component slots and the Shadow DOM.

We would like to do the same for all remaining overlays (ion-alert, ion-action-sheet, etc) but we would like to have some time to re-think the API for these components. Being able to use slots opens the door for meaningful customization done by developers. Additionally, the Shadow DOM update will remove a lot of styling frustrations with CSS specificity and overriding Ionic styles.

We are going to use the Ionic 6 release to test out this new approach with modal and popover, collect feedback, and iron out any bugs before doing the same to the remaining overlays. I do not have a timeline to share at the moment, but we recognize that the current overlay APIs are in need of a refresh and we are interested in fixing that.

I will update this thread when I have more to share. Thank you!

[geo242]

@liamdebeasi It's been over a year since the last update. Can you comment on any progress? This is a much needed feature imo.

[lincolnthree]

Still need this for adding "progress/timeout animations to ion-toast" (See #27957)