如何执行注销触发器并执行ngIf身份验证检查-Angular 4和Ionic 3

Question

I have 2 problems here:

I am not sure how to attach below Logout function to Logout Button , as you can see I am populating pages using *ngFor Directive.

I have (click)=openPage(p) but for Logout page it should execute Logout function instead of opening a page.

Also, Angular does not allow multiple *directives (for example: *ngIf and *ngFor) on the same element so how do I check for isAuthenticated to hide or show menu buttons. the tricky bit is that if user is not authenticated then I want to show 3 pages : login, register, contact and if authenticated show all other.

app.component.ts

this.pages = [
  { title: 'Dashboard', component: DashboardPage, icon: 'stats'  },
  { title: 'Analytics', component: TabsPage, icon: 'analytics'  },
  { title: 'Portfolio', component: ProtabsPage, icon: 'images'  },
  { title: 'Profile', component: PtabsPage, icon: 'person'  },
  { title: 'Customize', component: SettingsPage, icon: 'options'  },
  { title: 'Contact', component: ContactPage, icon: 'call'  },
  { title: 'Logout', component: DashboardPage, icon: 'log-out'  },
  { title: 'Register', component: RegisterPage, icon: 'person-add'  },
  { title: 'Login', component: LoginPage, icon: 'log-in'  }
  ];
this.activePage = this.pages[1];

Logout() {
    this.authService.logout();
}

authService.ts

logout(): void
{
    localStorage.removeItem('currentUser');
    this.isLoggedin = false;
    //Redirect to Login Page
}

app.html

  <button padding ion-item class="menu-btn" text-center *ngFor="let p of pages" [class.activeHighlight]="checkActive(p)" (click)="openPage(p)">
    <ion-icon  name="{{p.icon}}" ></ion-icon>
    <h4>{{p.title}}</h4>
  </button>

Answer 1

You can use ng-container with *ngIF

 <ng-container *ngFor="let p of pages">
<button  *ngIf="isLoggedin && p.title ==='Logout'" padding ion-item class="menu-btn" text-center  [class.activeHighlight]="checkActive(p)" (click)="Logout (p)">
    <ion-icon  name="{{p.icon}}" ></ion-icon>
    <h4>{{p.title}}</h4>
  </button>
<button  *ngIf="!isLoggedin"  padding ion-item class="menu-btn" text-center  [class.activeHighlight]="checkActive(p)" (click)="openPage(p)">
    <ion-icon  name="{{p.icon}}" ></ion-icon>
    <h4>{{p.title}}</h4>
 </button>
</ng-container>

Answer 2

You can choose to logical management inside the class. Instead of fixed open() method, put a method which will call corresponding method (open/logout, etc..) depending on the component that used it. You can even add more checks here, like if it's logged or not.