CODEWITHSUNDEEP
angulartypescriptmenutabsionic2
Mahmoud Ismail
Mahmoud Ismail

Reputation: 1617

How to set up side menu with tabs in Ionic 2?

How i can set up side menu with tabs in ionic 2, i've developed an app within ionic 2 but after set Root to page in tabs the menu not loaded properly any suggestion about that ?

Upvotes: 2

Views: 3683

Answers (1)

Fernando Del Olmo
Fernando Del Olmo

Reputation: 1450

i have a sidemenu with tabs view on my app so i think this will help you.

This is my menu template:

<ion-menu [content]="content" class="sidemenu">
  <ion-header>
    <ion-toolbar color="indigo500">
      <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)"
          class="item item-icon-left">
        <ion-icon name="{{p.icon}}"></ion-icon>
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
  <ion-footer>
    <button menuClose ion-item (click)="logout()">
      Logout
    </button>
  </ion-footer>
</ion-menu>

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

And my tabs view:

<ion-header class="class1">
  <ion-navbar color="indigo500">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>My App</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="class2">
  <ion-tabs tabsPlacement="top">
    <ion-tab tabTitle="Snacks" [root]="tab1"></ion-tab>
    <ion-tab tabTitle="Drinks" [root]="tab2"></ion-tab>
    <ion-tab tabTitle="Frozen" [root]="tab3"></ion-tab>
  </ion-tabs>
</ion-content>

And my menu.ts:

@Component({
  templateUrl: 'menu.html'
})
export class Menu {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = tabscomponent;

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

  constructor(public platform: Platform) {

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'List', component: component1, icon: 'list' },
      { title: 'Settings', component: component2, icon: 'settings' }
    ];

  }

  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);
  }
}

And you only have to redirect to Menu Component, hope this will help you.

Upvotes: 3

Related Questions