Hide Ionic TabBar on specific subpages (IONIC 3)

Question

I want to hide my tabbar on multiple specific pages. My main focus is to hide it on my Login page, Register page, and a comment page. I have tried tabsHideOnSubPages: true, but when i do this my UserProfile page (which is a subpage) hides the tabbar. The tabbar must also be visible on the UserProfile page but then again not on my previous mentioned subpages (login, register etc..).

I am currently using Ionic Framework : ionic-angular 3.2.0

Does anyone know how i can fix this?

Answer 1

You can try this.

Just put tabsHideOnSubPages in your config like this:

@NgModule({
  declarations: [ MyApp ],
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: true,
    }, {}
  )],
  bootstrap: [IonicApp],
  entryComponents: [ MyApp ],
  providers: []
})

Answer 2

I can give you a quick hotfix for that.

Copy this Code into your .ts page file. The function will execute when the page is loaded.

If you want to hide the tabbar then do this line of code:

tabs[key].style.display = 'none';

If you want to show it use this code by simply changing 'none' it to 'flex'.

tabs[key].style.display = 'flex';

This code is an angular function wich basicly means it executes when page is loaded.

ngAfterViewInit()

Full code:

ngAfterViewInit() {
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
        Object.keys(tabs).map((key) => {
            tabs[key].style.display = 'none';
        });
    }
}

You can also use this code to show the tabbar again if you leave the page.

    ionViewWillLeave() {
        let tabs = document.querySelectorAll('.show-tabbar');
        if (tabs !== null) {
            Object.keys(tabs).map((key) => {
                tabs[key].style.display = 'flex';
            });

        }
}

Hope this helped you.