CODEWITHSUNDEEP
ionic-frameworkionic3
josh.winters
josh.winters

Reputation: 3

Ionic 3 Tab Navigation + side menu

The issue I am having is that when I use these both together, Tab navigation dissapears when using side menu navigation.

Using tab navigation makes the app work similar to a SPA i'm assuming, in that the page is loaded in the view. However, when I navigate using the side menu, I go directly to that page, which is circumventing the point of the tab navigation.

Is there a way to make these both work together?

app.component.ts:

   import { Component, ViewChild } from '@angular/core';
   import { Nav, Platform } from 'ionic-angular';
   import { StatusBar } from '@ionic-native/status-bar';
   import { SplashScreen } from '@ionic-native/splash-screen';

   import { HomePage } from '../pages/home/home';
   import { Settings } from '../pages/settings/settings';
   import { Journeys } from '../pages/journeys/journeys';

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

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

   rootPage: any = TabsPage;

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

   constructor(public platform: Platform, public statusBar: StatusBar, 
   public splashScreen: SplashScreen) {
       this.initializeApp();


       this.pages = [
           { title: 'Home', component: HomePage },
           { title: 'Settings', component: Settings },
           { title: 'Journeys', component: Journeys }
       ];

   }

   initializeApp() {
       this.platform.ready().then(() => {
           this.statusBar.styleDefault();
           this.splashScreen.hide();
       });
   }

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

app.html:

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <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)">
          {{p.title}}
      </button>
    </ion-list>
 </ion-content>

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

Tabs.ts:

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


import { HomePage } from '../home/home';
import { Journeys } from '../journeys/journeys';
import { Settings } from '../settings/settings';




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

  tab1Root = HomePage;
  tab2Root = Journeys;
  tab3Root = Settings;

  constructor() {

  }
}

Tabs.html: 

<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle='Home' tabIcon='ios-home'></ion-tab>
<ion-tab [root]="tab2Root" tabTitle='Journeys' tabIcon='ios-car'></ion-tab>
<ion-tab [root]="tab3Root" tabTitle='Settings' tabIcon='md-settings'></ion-tab>

homepage.html:

   <ion-header>
       <ion-navbar>
           <button ion-button menuToggle>
           <ion-icon name="menu"></ion-icon>
       </button>
       <ion-title>Home</ion-title>
       </ion-navbar>
   </ion-header>

   <ion-content padding>
       <ion-grid>
           <ion-row>
               <ion-col col-12>
                    <p class='homepage_placeholder'>Homepage Placeholder</p>
               </ion-col>
           </ion-row>
     </ion-grid>
 </ion-content>

Upvotes: 0

Views: 1281

Answers (1)

Hyuck Kang
Hyuck Kang

Reputation: 1789

Firstly, add tabIndex to your this.pages

this.pages = [
    { title: 'Home', component: HomePage, tabIndex:0 },
    { title: 'Settings', component: Settings, tabIndex:1 },
    { title: 'Journeys', component: Journeys, tabIndex:2 }
    { title: 'PageNotInTab', component: componentName }
];

And then, make your openPage() like this

openPage(page): void{
    if(page.tabIndex){
      this.nav.setRoot(TabsPage,{selectedIndex:page.tabIndex})
    }else{
        this.nav.setRoot(page.component,{})
    }
}

Of cousre, TabsPage should be prepared before implementing the code above. I leave out the details.

In TabsPage

ngAfterContentInit(){       
  if(this.navParams.data.hasOwnProperty("selectedIndex"))
    this._selectedIndex = this.navParams.get("selectedIndex")
  else
    this._selectedIndex=0;
}

Upvotes: 1

Related Questions