Ionic Hide Tabs

Ionic Framework ionic-v3
44

I created a service for manipulating tabs. Just inject it in the class where you want to use it, gives your full control of the hide and show status.

1 Like
45

Thanks for your help.
The only issue i noticed was that if i hide the tabs and then add a footer, there is still a bottom: 50px; style added to the footer.
I can manually remove this on the page with css but would be nice to auto fix this in the service if possible?

46

https://gist.github.com/adamkearsley/3393a65b3db94b054f28c301bcaa5c85

1 Like
47

I found this is a good solution for iPhone and Android S7. But when I run a Genymotion simulator of a Samsung Galaxy Note 3 - 4.4.4 - API 19 it throws the following EXCEPTION ERROR

Cannot set property ‘transform’ of undefined"

Any ideas why?

48

How to do the reverse?
Hide the tab on the home page and display only on the internal pages?

49

Where would I use these show/hide methods on the actual pages I want to show/hide?

50

Import the service in the page that you want show/hide and you can call the method inside a View Lifecycle Hooks, for example i had to hide the tabs on login page so i did this:

Import the service:
import { TabsService } from '../../shared/services/tabs.service';

call the service on constructor:
constructor(public tabsService: TabsService) { }

And call the method once when the view is initially loaded into the DOM:

  ionViewDidLoad(){
    this.tabsService.hide();
  }
51

Actually the ionViewDidLoad with the hide method will hide the tabs for all pages, so i did a small change calling the service.

Every page that i want to hide the tabs i did this:

  ionViewWillEnter(){
    this.tabsService.hide();
  }

  ionViewWillLeave(){
    this.tabsService.show();
  }
52

I get these errors:
Runtime Error
Cannot find module “…/…/shared/services/tabs.service”

Typescript Error
Cannot find name ‘TabsService’.

53

Cannot find module “…/…/shared/services/tabs.service” because i create a file inside a folder shared/services, you can do the same: create a file/folders in src/shared/services/tabs.service.js;

The Cannot find name ‘TabsService’ is because you need import this service inside your app.module.ts:
import { TabsService } from ‘…/shared//services/tabs.service’;

and add inside your prividers:
providers: [
TabsService
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

and then:
Import the service inside the page that you are going to use:
import { TabsService } from ‘…/…/shared/services/tabs.service’;

call the service on constructor of the page:
constructor(public tabsService: TabsService) { }

1 Like
54 
<ion-tab tabsHideOnSubPages="true" [root]="tab1Root" tabTitle="Racing" tabIcon="home"></ion-tab>
3 Likes
55

thank u for your great answer

56

Hey,
You should to add

import { App } from 'ionic-angular';

constructor(public app: App)

this.app.getRootNav().setRoot( LoginPage );

when you did the logout.

5 Likes
57

Hi, this solution worked for me if you just want to hide the tabs on a specific tab or any page http://pointdeveloper.com/hide-ionic-2-tab-bar-specific-tabs/

58

simply use css classes => .tabbar { display:none } :grinning:

59

I love it when tutorials start out with “this is a bad idea, you shouldn’t be doing it, but here we go”.

1 Like
60

that same thought went through my head when I proposed to my ex-fiancée.

My advice: look for another tutorial…this one’s bad news.

61

This works! Thank you very much :slight_smile:

62

Just declare tabBarElement before constructor as example below:
tabBarElement: any;
constructor() {
// Do something
}

63

Thanks ,
It’s work for me,
you must to go with custome back button to move previous page.