How to display ion-icon based from property retrieved?

Ionic Framework ionic-v3
#1

Hi,

I would like to display ion-icon based from value retrieved from *ngFor.

Tried using *ngIf on ion-icon but it’s generating error.

<ion-list>
    <button ion-item (click)="getUsers()" *ngFor="let user of users" [navPush]="userPage" [navParams]="user">
      <ion-icon *ngIf="user.category=='Admin'" name="XXX" item-left></ion-icon>
      <ion-icon *ngIf="user.category=='Contributor'"  name="YYY" item-left></ion-icon>
      <h2>{{ user.first_name}}</h2>
      <p>{{ user.category}}</p>
    </button>
  </ion-list>

Here, it should display icon XXX if Category = ‘Admin’, else display icon YYY if Category=‘Contributor’

Any suggestion how to achieve this?

#2

Try using array of objects. Following is my approach for side menu icons -

app.components.ts -

this.pages = [
    { title: 'Home', component: HomePage, icon_name: 'home' },
    { title: 'About', component: AboutPage, icon_name: 'information-circle' },
    { title: 'Logout', component: LogoutPage, icon_name: 'log-out' },
];

app.html -

<ion-list>
    <button ion-item *ngFor="let p of pages" (click)="openPage(p)" class="item-icon-left">
        <ion-icon [name]="p.icon_name" item-left></ion-icon> {{p.title}}
    </button>
</ion-list>

Your approach -
I tried, *ngFor="" and [hidden]. But nothing worked. I tried wrapping it with <span>, but same result.