How to manage dynamic menu item in ionic?

App.component.ts
this.loginState = brokerUser.loginState; /* True or false value assigned based on login */

this.accountMenuItems = [
            {title: 'My Account', component: MyAccountPage, icon: 'ios-contact'},
            {title: 'Logout', component: WelcomePage, icon: 'log-out'},
        ];

        this.loginMenuItems = [
            {title: 'Login', component: LoginPage, icon: 'ios-contact'}
        ];
App.html
<ion-list *ngIf="loginState == true">
      <ion-list-header>
        Account
      </ion-list-header>
      <button menuClose ion-item *ngFor="let menuItem of accountMenuItems" (click)="openPage(menuItem)">
        <ion-icon item-left [name]="menuItem.icon"></ion-icon>
        {{menuItem.title}}
      </button>
    </ion-list>

    <ion-list *ngIf="loginState == false">
      <ion-list-header>
        Account
      </ion-list-header>
      <button menuClose ion-item *ngFor="let menuItem of loginMenuItems" (click)="openPage(menuItem)" >
        <ion-icon item-left [name]="menuItem.icon"></ion-icon>
        {{menuItem.title}}
      </button>
    </ion-list>

Comments

Popular posts from this blog

how to split array as per fixed length, and ionic two dates differences in min,seconds,hours

How to Add Firebase Analytics to Your NativeScript Mobile App