How to hide one of loggedInPages item in ionic-conference-app?

Ionic Framework ionic-v3
1

Hi,

I need to hide one of loggedInPages items in Ionic Conference App

For example I have an admin Page. When user logged in application, user can see admin page link in loggedInPages if user’s role is admin .

loggedInPages: PageInterface[] = [
    { title: 'Account', name: 'AccountPage', component: AccountPage, icon: 'person' },
    { title: 'Support', name: 'SupportPage', component: SupportPage, icon: 'help' },
    { title: 'Logout', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true },
    { title: 'Admin', name: 'Admin', component: AdminPage, icon: 'unlock', isAdmin: true }
  ];

<ion-list>
        <ion-list-header>
          Account
        </ion-list-header>
        <button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(p)">
          <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
          {{p.title}}
        </button>
      </ion-list>
2

You could do this with ngIf, but for performance reasons I wouldn’t. I would expose an Observable somewhere indicating whether we have an admin or not, and modify the array of available pages accordingly.

1 Like
3

Hi @rapropos,
I thought same thing which I can use ng-if. But I know that we cannot use *ngFor and *ngIf together.
Is it possible to share an example about your observable solution??

4

If you don’t mind, what do you see as the main performance issues here? I’m currently confusing myself about this topic.

5

The fact that ngIf expressions are evaluated zillions of times, so I try to avoid doing anything in them more complex than accessing a single property. By doing the calculation once based on a subscription, we avoid duplicated effort:

loggedInPages = [...]
loggedOutPages = [...];
availablePages = loggedOutPages;

constructor(auth: AuthService) {
  auth.notifier.subscribe((authed) => {
    this.availablePages = authed ? loggedInPages : loggedOutPages;
  });
}