How to avoid Tabs on footer when redirecting to ne

Question

This question already has an answer here:

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

i have a Tabs layout here is my page. On click on any of the item i am navgating to next 'this.navCtrl.push(NextPage);`.

But the problem is on my second page also i am getting the tabs take a look at this . after navigation done i no longer need the tabs in my second page.

how to avoid the tabs footer in the second page.

Answer 1

The easiest way is to toggle tab bar visibility with css as tabs is actually a component containing nested views.

So you'd better detect selected page and toggle tabbar display. You can track selected page by selectedIndex or add class depending on it.

Answer 2

As of Ionic 2.0.0-rc.1, you can set to hide the tabs when entering a child page in the app's config object by using the config property tabsHideOnSubPages. You can find more information here.

tabsHideOnSubPages (boolean): Whether to hide the tabs on child pages or not. If true it will not show the tabs on child pages.

You need to include the config object in the NgModule, inside the IonicModule.forRoot(...) method like this:

import { IonicApp, IonicModule } from 'ionic-angular';

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