ionic 2 + angular 2 - tabs + side menu

Question

I'm trying to join tabs and side menu together, I'm confused on what I'm doing wrong. since root belongs to sidemenu..

import {App, IonicApp, Platform} from 'ionic-framework/ionic';

import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {ListPage} from './pages/list/list';
import {TabsPage} from './pages/tabs/tabs';


// https://angular.io/docs/ts/latest/api/core/Type-interface.html
import {Type} from 'angular2/core';


@App({
  templateUrl: 'build/app.html',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
  // make HelloIonicPage the root (or first) page
  rootPage: Type = HelloIonicPage;
  pages: Array<{title: string, component: Type}>;

  constructor(private app: IonicApp, private platform: Platform) {

    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage },
      { title: 'testing tabs', component: TabsPage}
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // The platform is now ready. Note: if this callback fails to fire, follow
      // the Troubleshooting guide for a number of possible solutions:
      //
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      //
      // First, let's hide the keyboard accessory bar (only works natively) since
      // that's a better default:
      //
      // Keyboard.setAccessoryBarVisible(false);
      //
      // For example, we might change the StatusBar color. This one below is
      // good for dark backgrounds and light text:
      // StatusBar.setStyle(StatusBar.LIGHT_CONTENT)
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.app.getComponent('leftMenu').close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }
}

I'm new to ionic and I have follow following tutorial http://ionicframework.com/docs/v2/getting-started/tutorial/

It has tabs or side-menu, but does not have both. I have imported tabs, but I'm not sure what to do next, because rootPage belongs to HelloIonicPage, which I dont want to change.

Answer 1

It is not totally clear why you would need to do this but it is possible and the attached link has the code where I merged the two programs generated by the templates. The resulting program uses the tab1 page as the 'Getting Started' page. Menu for the sidebar is available from each of the tab pages.

1. I copied the folders in the pages folder of the 'tabs' program to the 'sidemenu' program.

2. From the 'Getting Started' I copied the nav bar code and the menu for the side bar. This seems to be inherited by the tab 2 and tab 3 pages including the specified title (not sure of the reason). So I added a h1 with a tab2 and tab3 title in each of the pages just as markers.

3. I modified the app.ts file to import the pages added in step 1.

4. I added import statements to import page1, page2 and page3 html files in the app.core.scss

The approach may allow to add a login screen and other utility screens (such as search) on the sidebar.

Merged Sidemenu and Tabs code in ionic 2