Tabs not displayed when opening links with Side Menu

Ionic Framework ionic-v3
1

I’m trying to combine a Side Menu with Tabs. My Side Menu has a set of links different from the ones available in the Tabs. I can visit the pages, but I don’t see the Tabs if I access them via Side Menu.

If I use the links I have in the Homepage of the app, I can get the Tabs everywhere. So what I want is to replicate this across the Side Menu as well.

This is my app.component.ts file:

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

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

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild('content') nav: Nav;
  rootPage: any = TabsPage;

  segmentPages: Array<{ title: string; component: any }>;
  diseasePages: Array<{ title: string; component: any }>;

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

    this.segmentPages = [
      { title: 'Adolescente 12-17', component: 'AdolescentePage' },
      { title: 'Mulher 18-25', component: 'MulherjovemPage' },
      { title: 'Mulher +35', component: 'MulheradultaPage' },
      { title: 'Homem', component: 'HomemPage' }
    ];
    this.diseasePages = [
      { title: 'O Cancro', component: 'CancroPage' },
      { title: 'A Prevenção', component: 'PrevencaoPage' },
      { title: 'O Tratamento', component: 'TratamentoPage' },
      { title: 'A Fertilidade', component: 'FertilidadePage' }
    ];
  }

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

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

and my app.html

<ion-menu [content]="content">
<ion-header>
  <ion-toolbar>
    <ion-title text-uppercase>Menu</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-list-header>Sou</ion-list-header>
    <button menuClose ion-item *ngFor="let p of segmentPages" (click)="openPage(p)">
      {{p.title}}
    </button>
    <ion-list-header>Saber mais sobre</ion-list-header>
    <button menuClose ion-item *ngFor="let p of diseasePages" (click)="openPage(p)">
      {{p.title}}
    </button>
    <ion-list-header>Linha de Apoio</ion-list-header>
    <ion-item>
      <h1 color="primary"><ion-icon name="call"></ion-icon> 808 255 255</h1>
    </ion-item>
  </ion-list>

</ion-content>
</ion-menu>

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

This is the code for my Home page (home.ts), which works as desired:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}
  goToPage(page) {
    this.navCtrl.setRoot(page);
  }
}

Why doesn’t setRoot keep the tabs when I use it inside app.component.ts?

2

Try in this direction:

app.component.ts

this.nav.setRoot(‘TabsPage’, {tabIndex: 2});

tabs.ts

this.selectedIndex = this.navParams.get(‘tabIndex’) || 0;

tabs.html

<ion-tabs [selectedIndex]=“selectedIndex”>

3

To see the tabs, you must have your root page point to the tabs page.
As soon as you call setRoot to any other page, the new page will become the root, and the tab options will be gone.
To move between the tabs you need to call the select function on the tabs object.
Use the following tabs guide to understand this better: https://ionicframework.com/docs/api/components/tabs/Tabs/

4

Thanks for the help, @Putintsev and @Roye . I had a look at the select function and I’m afraid it’s not what I’m looking for.

The problem here is that the links in the sidemenu are different from the ones in the tabs. So in the tabs I have Link 1/2/3/4, but in the sidemenu Links 5/6/7/8. Can I still navigate to those while displaying the tabs?

5

Here is a GIF that describes the problema I’m facing: https://gfycat.com/gifs/detail/BlondPositiveIrishredandwhitesetter

6

I played the video and I see that you don’t navigate using the tabs (yet).
Questions:

  1. What is the relationship between the tabs and the menu ?
  2. Would the menu entries will change based on the selected tab ?
  3. When you click on a menu item, which tab should be selected (and how would it know ) ?
7

Hi @Roye here are my replies! Thanks for taking the time to help.

  1. Tabs have different links from the Menu. Tabs are defined as the root page, while the Menu is part of app.html and app.component.ts (code in the initial post)

  2. The menu entries won’t change.

  3. No tab should be selected, since links from the menu are from other sections that aren’t an option in any tab. The user just needs to see the tabs at all times.

8

If the menu open a view for information that is not in the tabs or relates to any tabs, the tabs bar shouldn’t be viewed.
I believe the correct way is to use NavController.push for the menu items. The user will see a page that cover the entire view ( also cover the tabs too ), and can click on the (<-) back button to return to main page with your tabs.
So, the tabs are always there, just will be covered with entries from the menu are used.

9

Hi,

have you solved the problem? I’m currently facing same. Can you help me with it?

10

Hi friend, unfortunately not.

If I recall correctly, I ended up creating a custom footer that was present on every page, with <ion-footer>, <ion-toolbar>, <ion-grid> and some CSS so that it would resemble tabs!