Ionic 3 tabbar getting disappear when routing from sidebar - html

Question

In My ionic 3 app the tab bar is getting disappear when navigating from side bar. All other pages are working fine. Only when routing from side bar, tab is getting disappear.
Here is my app.html
<ion-menu [content]="content" type="overlay">
<ion-content class="menubar">
<ion-list class="mainmenu">
<div class="profile">
<ion-row>
<ion-col col-4><img src="./assets/imgs/wgs-logo.png" alt=""></ion-col>
<ion-col col-8 class="j-c-center" (click)="openLandingPage()">
<ion-icon slot="start" class="landing-page-icon" name="custom-landing-page"></ion-icon>
</ion-col>
</ion-row>
</div>
<ion-item no-lines class="menuitem" *ngFor="let cate of categoryFullData; let i = index;">
<button ion-button clear menuToggle (click)="opencategory(cate.id, cate.categry)">
<img src="{{baseUrlImage}}{{cate.cateimg}}">
<p>{{cate.categry}}</p>
</button>
<ion-icon slot="end" name="ios-arrow-down" class="icon-down-arrow" (click)="menuItemHandler(i)"></ion-icon>
<ion-item-group submenu [class.visible]="showSubmenu[i]">
<ion-item no-lines class="menuitem" *ngFor="let subcate of cate.subcategories; let i = index;">
<button ion-button clear (click)="opencategory(subcate.id, subcate.categry)" menuToggle>
<img src="{{baseUrlImage}}{{subcate.cateimg}}">
<p>{{subcate.categry}}</p>
</button>
</ion-item>
</ion-item-group>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openLandingPage()">
Sell
</button>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openAboutUs()">
<p>About Us</p>
</button>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openTermsAndConditions()">
<p>Terms & Conditions</p>
</button>
</ion-item>
<ion-item no-lines class="menuitem">
<button ion-button clear menuToggle (click)="openPrivacyPolicy()">
<p>Privacy Policy</p>
</button>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Here is my app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Nav, Platform, App, LoadingController, AlertController, ToastController } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { NotificationsPage } from '../pages/notifications/notifications';
import { OrderHistoryPage } from '../pages/order-history/order-history';
import { ContactPage } from '../pages/contact/contact';
import { FeedbackPage } from '../pages/feedback/feedback';
import { HomePage } from '../pages/home/home';
import { OffersPage } from '../pages/offers/offers';
import { TermsPage } from '../pages/terms/terms';
import { HkApiproviderProvider } from '../providers/hk-apiprovider/hk-apiprovider';
import { CategoryPage } from '../pages/category/category';
import { LanguageServiceProvider } from '../providers/language-service/language-service';
import { TranslateService } from '#ngx-translate/core';
import { TabsPage } from '../pages/tabs/tabs';
import { ProductsPage } from '../pages/products/products';
import { LandingPage } from '../pages/landing-page/landing-page';
import { PrivacyPage } from '../pages/privacy/privacy';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
validEmail:any;
rootPage: any = TabsPage;
showSubmenu = [];
resposeData: any;
categoryFullData:any;
pages: Array<{title: string, component: any}>;
apptoken = {"token":""};
postData={
"user_id":"",
"token":"",
}
baseUrlImage: any;
itemsuperqty: number;
userDetails: any;
constructor(public platform: Platform, public auth:HkApiproviderProvider,public app:App, public toastCtrl: ToastController, public loadingCtrl:LoadingController, public alertCtrl:AlertController, public statusBar: StatusBar, public splashScreen: SplashScreen,public langserv : LanguageServiceProvider, translate: TranslateService) {
this.initializeApp();
this.apptoken.token = HkApiproviderProvider.gettoken();
localStorage.setItem('appconfig', JSON.stringify(this.apptoken));
langserv.getdefaultlang();
translate.setDefaultLang(langserv.defaultlang);
this.langserv.changelang('en');
this.itemsuperqty = 1;
this.baseUrlImage = auth.getimage();
if(localStorage.getItem('userData')){
const data = JSON.parse(localStorage.getItem('userData'));
this.userDetails = data.userData;
}
this.postData.token = HkApiproviderProvider.gettoken();
this.getcategorydata();
}
/* menuItemHandler(): void {
this.showSubmenu = !this.showSubmenu;
} */
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.backgroundColorByHexString('#307722');
this.splashScreen.hide();
});
}
onclickHome(){
this.nav.setRoot(HomePage , { tabIndex: 0 });
}
onclickcategory(){
this.nav.push(CategoryPage , { tabIndex: 0 });
}
onclickMyOrder(){
this.nav.push(OrderHistoryPage , { tabIndex: 1 });
}
openContact(){
this.nav.push(ContactPage , { tabIndex: 0 });
}
onclickNoti(){
this.nav.push(NotificationsPage , { tabIndex: 0 });
}
openfeedback(){
this.nav.push(FeedbackPage , { tabIndex: 0 });
}
openoffers(){
this.nav.push(OffersPage , { tabIndex: 0 });
}
openterms(){
this.nav.push(TermsPage , { tabIndex: 0 });
}
openprivacy(){
this.nav.push(TermsPage , { tabIndex: 0 });
}
openLandingPage(){
this.nav.push(LandingPage);
}
checkLogin(){
if(localStorage.getItem('userData')){
return true;
}else{
return false;
}
}
menuItemHandler(index): void {
if(this.showSubmenu[index] && this.showSubmenu[index] == false) {
this.showSubmenu[index] = true;
} else if (this.showSubmenu[index] && this.showSubmenu[index] == true) {
this.showSubmenu[index] = false;
} else {
this.showSubmenu[index] = true;
}
}
public getcategorydata()
{
let zest = this.loadingCtrl.create({
content: "Getting Data..",
duration:20000,
spinner:'crescent'
});
zest.present();
this.auth.postData(this.postData, "getcategory").then((result) => {
this.resposeData = result;
this.categoryFullData = this.resposeData.Data;
//console.log(result);
zest.dismiss();
}, (err) => {
zest.dismiss();
});
}
opencategory(category, cname){
this.nav.push(ProductsPage,{
category : category,
cname : cname,
tabIndex: 1
});
}
openAboutUs() {
this.nav.push(ContactPage);
}
openTermsAndConditions() {
this.nav.push(TermsPage);
}
openPrivacyPolicy() {
this.nav.push(PrivacyPage);
}
}
This is my tabs.html page
<ion-tabs>
<ion-tab [root]="tab6Root" class="tab-bar" tabIcon="custom-landing-page">
</ion-tab>
<ion-tab [root]="tab1Root" class="tab-bar" tabIcon="ios-home-outline">
</ion-tab>
<ion-tab [root]="tab2Root" class="tab-bar" tabIcon="ios-person-outline">
</ion-tab>
<ion-tab [root]="tab3Root" class="tab-bar" tabIcon="icon-cart-white" [tabBadge]="cartCounterManager()">
</ion-tab>
<ion-tab [root]="tab4Root" class="tab-bar" tabIcon="ios-heart-outline" [tabBadge]="wishListCounterManager()">
</ion-tab>
<ion-tab [root]="tab5Root" class="tab-bar" tabIcon="ios-search-outline">
</ion-tab>
</ion-tabs>
tabs.component.ts
import { Component } from '#angular/core';
import { ProductSearchPage } from '../product-search/product-search';
import { ProfilePage } from '../profile/profile';
import { HomePage } from '../home/home';
import { CartPage } from '../cart/cart';
import { WishListPage } from '../wishlist/wishlist';
import { NavController, NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { ProductsPage } from '../products/products';
import { LandingPage } from '../landing-page/landing-page';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = ProfilePage;
tab3Root = CartPage;
tab4Root = WishListPage;
tab5Root = ProductSearchPage;
tab6Root = LandingPage;
selectedIndex: Number;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
){
}
ionViewDidLoad() {
this.selectedIndex = this.navParams.get('tabIndex') || 0;
console.log(this.selectedIndex)
}
cartCounterManager(){
return HomePage.cartData.length
}
wishListCounterManager(){
return HomePage.wishListData.length
}
}
I tried every method available but none works. Please help. Every small comments will be appreciated.