Tabs+menu , not being able to show menu

Ionic Framework ionic-v3
1

hi, I am trying to enable menu, but menu does not show…I dont know what im doing wrong!!

app.component.ts:

  export interface PageInterface {
    title: string;
    component: any;
    icon: string;
    index?: number; 
   }

   @Component({
     templateUrl: 'app.html'
   })
    export class MyApp {

      @ViewChild (Nav) nav: Nav;
          appPages: PageInterface[] = [
             {title: 'About', component: TabsPage, icon: 'information-circle'},
             {title: 'Jobs', component: TabsPage, index: 1, icon: 'briefcase'},
             {title: 'Contact', component: TabsPage, index: 2, icon: 'contacts'},
             {title: 'Home', component: TabsPage, index: 3, icon: 'home'},
             {title: 'Animation', component: TabsPage, index: 4, icon: 'home'}
           ];

          rootPage: any;

           constructor(public platform: Platform, public jobsData: JobsData, public storage: Storage,
               public local: Local, public menu: MenuController) {
   
                 this.rootPage = TabsPage;
                 this.menu.enable(true, 'myMenu');

                 jobsData.load().subscribe(res => {
                 local.localData(res);
                 });

                this.platformReady()
              }

      openPage(page: PageInterface) {
         if (page.index) {
            this.nav.setRoot(page.component, { tabIndex: page.index });
         } else {
          this.nav.setRoot(page.component).catch(() => {
            console.log("Didn't set nav root");
          });
        }
      }

     platformReady(){
         this.platform.ready().then(() => {
         Splashscreen.hide();
     });
    }
  }

app.html:

   <ion-menu id="myMenu" [content]="content">

    <ion-header>
      <ion-toolbar>
         <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

   <ion-content>

      <ion-list>
        <ion-list-header>
          Navigate
        </ion-list-header>
        <button menuClose ion-item *ngFor="let p of appPages" (click)="openPage(p)">
           <ion-icon item-left [name]="p.icon"></ion-icon>
            {{p.title}}
        </button>
   </ion-list>
 </ion-content>

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

Try creating a new app using Ionic Super Starter. It includes both menu and tabs and it works like a charm. You can then compare the code to yours to see what’s different. I hope it helps

1 Like
3

Hi, thank you for reply… actually it was working fine , i just didn’t add a menu button… however when there is no button it should work when you swipe the screen so the menu appears… testing on web its working fine… but when i test it on real device…it does not respond, only sometimes…im not sure if this is a bug or you have to have a menu button on top in order to toggle between them !