CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2
fongfuse
fongfuse

Reputation: 129

How to show and hide page in side menu IONIC2

I want to create side menu in ionic2. But, I have no idea how to show and hide an option inside menu. I want to show some option inside menu, before login and after login.

Before login             After login
---------                ---------
Home                     Home
Login                    Myprofile
                         Logout

app.ts

pages: Array<{title: string, component: any}>;
    pagess: Array<{title: string, component: any}>;

    this.pages= [
          { title: 'Home', component: HomePage},
          { title: 'Login', component: LoginPage}
        ];

    this.pagess = [
          { title: 'Home', component: HomePage},
          { title: 'Myprofile', component: MyprofilePage},
          { title: 'Logout', component: HomePage}
        ];

enableMenu(loggedIn: boolean) {
    this.menu.enable(loggedIn, 'loggedInMenu');
    this.menu.enable(!loggedIn, 'loggedOutMenu');
  }

I dont know how to set enableMenu

app.html

<ion-menu id="loggedOutMenu" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>

  </ion-content>
</ion-menu>

<ion-menu id="loggedInMenu" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pagess " (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>

  </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

login.ts (login is check in myphpfile)

login() {
       this.api.getLogin(this.username, this.password).subscribe(
   data => {

     let loader = this.loadingCtrl.create({
      content: "Please wait...",
      duration: 1000
    });
    loader.present();
    this.navCtrl.setRoot(HomePage);
   },
   err =>  {

    let alert = this.alertCtrl.create({
      title: 'Warning!',
      subTitle: 'incorrect!',
      buttons: ['OK']
    });
    alert.present();
  }
  );

}

Upvotes: 0

Views: 3153

Answers (1)

Sagar Kulkarni
Sagar Kulkarni

Reputation: 2081

You can do this by subscribing/listening to the loggedIn event. Now, this is different than your normal login. You need to check if you are logged in.

Your app.html code will remain like this:

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" *ngIf='p.isVisible'>
        {{p.title}}
      </button>
    </ion-list>

  </ion-content>
</ion-menu>

Now here is the major change in app.ts. 

pages: Array<{title: string, component: any, isVisible: boolean}>;

constructor(){
  this.api.isLoggedIn().subscribe(loggedIn => {
    this.pages= [
      { title: 'Home', component: HomePage, isVisible: true},
      { title: 'Login', component: LoginPage, isVisible: !loggedIn},
      { title: 'Myprofile', component: MyprofilePage, isVisible: loggedIn},
      { title: 'Logout', component: LogoutPage, isVisible: loggedIn}
    ];
  });
}

Now, your isLoggedIn() is a method, which returns an Observable, when the state of login is changed. It's data is boolean. You already might have this in your API like firebase has or you need to maintain/write it. Let me know what you are using and I will update my answer.

Upvotes: 3

Related Questions