How to Mixing Side Menu and Tabs in Ionic 2

Update: This Ionic 2 side menu and tabs tutorials now includes problem-solving on the side menu and tabs.

One of the easiest method to use side menu and tabs together in one app without pain, because it's using default starter template side menu together with build in Ionic 2 tabs. The scenario for this tutorial is an app with side menu which in one of menu or page there are tabs. To the point, let's begin this tutorial.

1. Create New Ionic 2 App

As usually, we always start a tutorial by creating a new project. This can be done by going to your project folder and type this command in your terminal/console.

ionic start MySideMenuTabs sidemenu --v2

That command tells ionic to create a new project with name "MySideMenuTabs" with additional "sidemenu" template (default template was tabs). "--v2" indicating that we use Ionic 2 as default.

Now, go to the newly created project folder.

cd MySideMenuTabs

From here, run your app and see what it looks like.

ionic run ios

Using that command, we will test our app using iPhone simulator. And here it is.

2. Create Tabs Page

Now, it's time to create tabs on page 2. Actually you can do this easily by look at current tabs app and learn the structure of project for build tabs app. But now, we will do it like this. Create 2 new pages by this command (tap enter after each line).

ionic g page Tabs
ionic g page Page3

Open and edit src/app/app.module.ts then add import for newly create pages.

import { TabsPage } from '../pages/tabs/tabs';
import { Page3Page } from '../pages/page3/page3';

Inside "@NgModule" at "declarations" and "entryComponents" add Tabs and Page3, so it will be like this.

declarations: [
  MyApp,
  Page1,
  Page2,
  TabsPage,
  Page3
],
...
entryComponents: [
  MyApp,
  Page1,
  Page2,
  TabsPage,
  Page3
],

Next, open and edit src/app/app.component.ts then change import of Page2 to Tabs.

import { TabsPage } from '../pages/tabs/tabs';

In "constructor" change Page 2 component to Tabs inside pages array.

this.pages = [
  { title: 'Page One', component: Page1 },
  { title: 'Page Two', component: TabsPage }
];

Next, open and edit src/pages/tabs/tabs.ts and replace all codes with this.

import { Component } from '@angular/core';

import { Page2 } from '../page2/page2';
import { Page3Page } from '../page3/page3';

/*
  Generated class for the Tabs page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {

  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = Page2;
  tab2Root: any = Page3Page;

  constructor() {

  }

}

Next, edit src/pages/tabs/tabs.html and replace all tags with this.

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Page 2"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Page 3"></ion-tab>
</ion-tabs>

Now, we have to change page 3 contents to make a difference between 2 pages. Edit src/pages/page3/page3.html and this code inside "ion-content".

<ion-content padding>
  <h3>This is Page 3</h3>
</ion-content>

This time to re-run your app in iOS simulator.

You will find tabs contains Page 2 and Page 3 in menu Page Two.

Is that too easy? Here's the full source code on GitHub.

3. Problem Solving on Side Menu and Tabs

Using both side menu and tabs or just side menu will be facing some a problems if you just follow the default. Here's what I found so far.

Side menu still active in the page that not using side menu.

When I create a new page that not include side menu for example login page, side menu still accessible by swapping from the side of the screen, even we don't include the header in that page. For that, I found a solution in Ionic Documentation to disable swap on the specific page by adding this lines of code. Open the page controller that you want to disable swap, mine is login.ts then add MenuController in import.

import { MenuController, NavController, NavParams, LoadingController, ToastController } from 'ionic-angular';

Then initialize Menu Controller in the constructor's parameter and call it inside constructors.

constructor(public navCtrl: NavController, public navParams: NavParams, public apiService: ApiService, public menu: MenuController, public loadingCtrl: LoadingController, private toastCtrl: ToastController) {
    this.menu.swipeEnable(false);
  }

That it's if want to enable swap menu just turn it to "true".

Tabs Still Exists in Non-Tabs Page

Another problem that I found in the real project that if we click button from inside tab page to open another non-tabs page, the tabs still exists in another non-tabs page. This happening because you call push or setRoot from the page that not the same level as destination page. Page inside tabs in the child of tabs page, so another non-tabs page is the same level as tabs page itself. To solve this just call nav.setRoot or nav.push from the root of the tab just add App module to the import.

import { App, NavController, NavParams, LoadingController, Platform } from 'ionic-angular';

Initialize it in the constructor parameter.

constructor(public app: App, public navCtrl: NavController, public navParams: NavParams, public apiService: ApiService, public loadingCtrl: LoadingController, public platform: Platform) {}

Then, in every action or method for calling another page call root page first before nav.push or nav.setRoot.

gotoOtherPage() {
  let nav = this.app.getRootNav();
  nav.setRoot(AnotherPage);
}

 Now, every you call other pages from inside tab the tabs will disappear.

Thanks.