Hide some ion items from the side menu based on the login

Ionic Framework ionic-v3
1

I want to show side menu item different after login. Can any one help me how can i do It.

Following is my app.component.ts file code

import { Component, ViewChild } from ‘@angular/core’;
import { Nav, Platform } from ‘ionic-angular’;
import { StatusBar, Splashscreen } from ‘ionic-native’;

import { HomePage } from ‘…/pages/home/home’;
import { AboutUsPage } from ‘…/pages/aboutUs/aboutUs’;
import { ContactUsPage } from ‘…/pages/contactUs/contactUs’;
import { ShopPage } from ‘…/pages/shop/shop’;
import { Page2 } from ‘…/pages/page2/page2’;
import { Storage } from ‘@ionic/storage’;

@Component({
templateUrl: ‘app.html’,
providers: [Storage]
})
export class MyApp {
@ViewChild(Nav) nav: Nav;

rootPage: any = HomePage;
activePage: any;

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

constructor(public platform: Platform, public storage: Storage) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    

}

initializeApp() {
    this.platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        debugger;
        this.storage.get('UserId').then((val) => {
            if (val != null && val != '') {
                this.pages = [
                    { icon: 'fa fa-home', title: 'Home', component: HomePage },
                    { icon: 'fa fa-gift', title: 'Offers', component: Page2 },
                    { icon: 'fa fa-shopping-cart', title: 'My Orders', component: Page2 },
                    { icon: 'fa fa-shopping-cart', title: 'Shop Info', component: ShopPage },
                    { icon: 'fa fa-user', title: 'My Account', component: AboutUsPage },
                    { icon: 'fa fa-info-circle', title: 'About Hammerdesk', component: AboutUsPage },
                    { icon: 'fa fa-envelope', title: 'Contact Us', component: ContactUsPage },
                    { icon: 'fa fa-sign-out', title: 'Log Out', component: Page2 },

                ];
                this.activePage = this.pages[0];
            } else {
                this.pages = [
                    { icon: 'fa fa-home', title: 'Home', component: HomePage },
                    { icon: 'fa fa-gift', title: 'Offers', component: Page2 },
                    { icon: 'fa fa-shopping-cart', title: 'Shop Info', component: ShopPage },
                    { icon: 'fa fa-info-circle', title: 'About Hammerdesk', component: AboutUsPage },
                    { icon: 'fa fa-envelope', title: 'Contact Us', component: ContactUsPage },
                    { icon: 'fa fa-sign-out', title: 'Log In', component: Page2 },

                ];
                this.activePage = this.pages[0];
            }
        })

        StatusBar.styleDefault();
        //Splashscreen.hide();
        this.hideSplashScreen();
    });
}

hideSplashScreen() {
    //if (Splashscreen) {
    //    setTimeout(() => {
    //        Splashscreen.hide();
    //    }, 100);
    //}

    if (navigator && Splashscreen) {
        setTimeout(() => {
            Splashscreen.hide();
        }, 100);
    }
}

openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
    this.activePage = page;
}

checkActive(page) {
    return page == this.activePage;
}

}

And Here is app.html

<ion-menu [content]=“content”>






Hammerdesk


<ion-content>
    <ion-list no-lines>
        <button [class.activePageHighlight]="checkActive(p)" menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
            <span class="{{p.icon}}"></span> &nbsp;
            {{p.title}}
        </button>
    </ion-list>
</ion-content>

<ion-nav [root]=“rootPage” #content swipeBackEnabled=“false”>

2 
this.pages1= [
      { title: 'Rol one', component: HorarioPage, icon : 'calendar' },
this.pages2= [
     { title: 'Rol 2', component: DocenteHorarioPage, icon : 'calendar' },
    ];
this.pages3= [
      { title: 'Rol 3', component: PadreSlctHijoPage, icon : 'arrow-dropright' },
             ];
//In app.html

< ion-menu [content]=“content” id=“menuOne”>< /ionmenu >
< ion-menu [content]=“content” id=“menuDos”>< /ionmenu >
//and en your pages. ts

this.menuCtrl.enable(false, ‘menuOne’);
this.menuCtrl.enable(true, ‘menuTwo’);
this.menuCtrl.enable(false, ‘menuTres’);

2 Likes