Seeking a solution to hide tabs on subpages within an app, I have tried utilizing the following code:
<ion-tab [root]="MyPage" tabsHideOnSubPages="true" ...></ion-tab>
While this code works when running 'ionic serve,' it fails to hide the tabs on my devices, rendering them unusable in subpages.
Does anyone have any ideas on how to successfully hide the tabs on my devices?
[update] Removing a Google map from a child page seems to resolve the issue.
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!');
});
}
}
Having a map is essential to my requirements. Has anyone else encountered this issue before?