Ionic 2 tabs template with the same side-menu

Question

Still coming from here,

I'm trying to mix tabs template with side-menu and I want the side-menu to be available to all the tabs, without duplicate code.

Actually, I'm a newbie to Ionic altogether and I dived into Ionic 2.

I created a new app from the tabs template; now this app has four tabs: home, contact, map, and info the four pages generated for these tabs have the same exact structure

EDIT app.component.ts looks like this

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

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = TabsPage;

  constructor(platform: Platform) {
    ...
  }
}

so I have my home.ts looking like this

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NavigationDrawer } from '../drawer/drawer'; // I added this line so that I could include the side-menu on every page

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
    constructor(public navCtrl: NavController) {}
}

and my home.html looks like this

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Welcome</ion-title>
        <ion-buttons start left>
            <button menuToggle ion-button small icon-only color="royal">
                <ion-icon name="menu"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-menu [content]="drawer">
    <navigation-drawer></navigation-drawer><!-- also in the attempt to bring the side-menu into this home.html -->
</ion-menu>

<ion-nav #drawer></ion-nav>

<ion-content>
    <ion-card></ion-card>
</ion-content>

the drawer.ts looks like this

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

@Component({
    selector: 'navigation-drawer',
    templateUrl: 'drawer.html'
})

export class NavigationDrawer {
  constructor() {}
}

the drawer.html looks like this

<ion-content>
    <ion-list>
        <button ion-item (click)="itemSelected(item)">
            <ion-icon ios="ios-contact" md="ios-contact" item-left></ion-icon> Profile
        </button>
    </ion-list>
</ion-content>

my tabs.html

<ion-tabs>
    <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="contact"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="location"></ion-tab>
    <ion-tab [root]="tab4Root" tabIcon="info"></ion-tab>
</ion-tabs>

my tabs.ts

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

import { HomePage } from '../home/home';
import { ContactPage } from '../contact/contact';
import { InfoPage } from '../info/info';
import { MapPage } from '../map/map';

@Component({
  templateUrl: 'tabs.html'
})

export class TabsPage {

  tab1Root: any = HomePage;
  tab2Root: any = ContactPage;
  tab3Root: any = InfoPage;
  tab4Root: any = MapPage;

  constructor() {

  }
}

The side-menu works for only the home screen and does not work for any other screen.

Please, who has an idea how to get this to work. Please help out

Answer 1

its more easy than that. You just need a root page to contains the side menu, we can call it menu.html:

<ion-menu [content]="content" class="sidemenu">
  <ion-content>
    <ion-list no-lines>
      <ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon color="gray" name="{{p.icon}}" item-left></ion-icon>
          {{ 'Menu.' + p.title | translate }}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

And your menu.ts:

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

  rootPage: any = tabsPage;

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

  constructor(public platform: Platform) {
    this.pages = [{ title: 'tabs', icon: 'home' }];

  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }
}

And then you just need your pages, in this case a tabs page, tabs.html:

<ion-tabs>
  <ion-tab [tabTitle]="tab title" [root]="tab content"></ion-tab>
</ion-tabs>

Hope this helps you.