Angular Ionic icon binding does not compile

user_4737657 0
Viewed 48

I have a custom version of <ion-select> under which I use the standard <ion-select-option>.

<custom-select>
    <ion-select-option></ion-select-option>
</custom-select>

When I bind an icon like this

<ion-select-option value="test" icon="information-circle">
    Test
</ion-select-option>

The code compiles and the custom wrapper component takes care of adding the icon in the appropriate place.

But when I bind it like this

<ion-select-option value="test" [icon]="getIcon()">Test2</ion-select-option>

I get error Can't bind to 'icon' since it isn't a known property of 'ion-select-option'.

I need the latter because adding the icon is conditional.

Example: stackblitz link

ionic-framework angular
2 Answers

ion-select-option don't have icon property, check the docs

You can create your own select component and load into a popover

For example

component.html

...
<ion-list>
    <ion-item (click)="selectItem('test')">
        <ion-icon slot="end" name="logo-ionic"></ion-icon>
        <ion-label>Test</ion-label>
    </ion-item>
</ion-list>
...

component.ts

...
constructor(public popoverController: PopoverController) {}

selectItem(val) {
    this.popoverController.dismiss(val);
}
...

home.ts

async presentPopover(e: Event) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      event: e
    });

    await popover.present();

    const { role } = await popover.onDidDismiss();
    this.roleMsg = `Popover dismissed with role: ${role}`;
}
user_192386010

I found a solution, using attr.icon works:

<ion-select-option
  value="test2"
  attr.icon="{{ 1===1 ? 'information-circle' : null }}"
>
  Test2
</ion-select-option>

I still don't know why it works although ion-select-option does not have icon attribute officially.

user_47376570
Related