Ionic 3 tabbar getting disappear when routing from sidebar

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

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

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.

Ionic 3 tabbar getting disappear when routing from sidebar

0 Answers