Hide tabs in sub pages in Ionic 2 [duplicate]

Question

This question already has an answer here:

• How to keep tab when pushing a new page? 1 answer

I try to hide tabs on all my subpages in my app. I use this :

<ion-tab [root]="MyPage" tabsHideOnSubPages="true" ...></ion-tab>

When I run ionic serve; it's work. But when I try to run it on my devices, my tabs aren't hide in the sub pages, and I can't use it.

Someone has an idea to finally hide my tabs in my devices ?

[update] In my child page I have a google map. If I delete it I don't have my problem anymore.

Child page .html :

<ion-header>
  <c-header></c-header>
</ion-header>

<ion-content>
  <div id="map"></div>
</ion-content>

Child page .css :

#map {
  height: 50%;
}

Child page .ts :

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';

/*
  Generated class for the DetailsMedicalEvent page.

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

  map: GoogleMap;

  constructor(public navCtrl: NavController, public platform: Platform) {
    platform.ready().then(() => {
      this.loadMap();
    });
  }

  loadMap(){

    let location = new GoogleMapsLatLng(-34.9290,138.6010);

    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': location,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
      console.log('Map is ready!');
    });
  }
}

I really need to have a map. Someone already have this problem ?

Answer 1

You can also try by setting the tabsHideOnSubPages config property in the app.module.ts file like this:

... 
imports: [
    IonicModule.forRoot(MyApp, {
        // Tabs config
        tabsHideOnSubPages: true,
        ...
    })
]
...

---

From Ionic docs:

tabsHideOnSubPages: boolean

Whether to hide the tabs on child pages or not. If true it will not show the tabs on child pages.

Answer 2

To add "tabsHideOnSubPages: true" in app.module.ts works for me. (ionic 2)

Answer 3

To be completely flexible with when to hide and show the tabs, you can also just use a CSS class like the following:

ion-tabs.hidden div.tabbar {
    display: none
}

In your tabs.ts you can have a boolean variable to denote if the tabs should be hidden.

public hideTabs:boolean = false;

In tabs.html add ngClass to ion-tabs to apply the hideTabs style when the variable is true:

<ion-tabs [ngClass]="{'hidden': hideTabs}">

You can toggle the hideTabs variable in any function f.e. inside the function that navigates to a subpage, but also in ionic's ionViewWillEnter() functions.