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



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 }
        <button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(p)">
          <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>


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.


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??


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


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;