How to show tabs bar with home page but without including home page in tabs page?

Ionic Framework ionic-v3
1

Hello,

my project have one tabs page

My tabs page is like this:-

<ion-tabs #mainTabs class="page-tabs" [selectedIndex]="selectedIndex">
  <ion-tab [root]="tab1Root" tabTitle="Demo 1"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Demo 2"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Demo 3"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Demo 4"></ion-tab>
</ion-tabs>

so after login i wrote this.navCtrl.setRoot(‘TabsPage’);

so it shows Demo1Page

but i want to show HomePage with Tabs

i try all things that i can do
but at the end i don’t know how to solve this problem?

Please help me

2

Quick solution:

this.navCtrl.setRoot(‘HomePage’);

Then go to your other Pages (including Home Page) .ts files and add this code.

Either like this:

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

	}

Or like this whatever you prefer. (I would recommend this since I ran into errors with Android devices with the first method)

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

}

If you want to disable tabs for a page just simply add none instead of flex!

3

Hi, @cherry

I implemented this solution but also i got homepage without tabs page

it will go inside the if condition but no effect on tabs

4

I don’t quite understand what you mean.
Are you sure you added everything correctly ? It works for me and I have got the same Tabscode as you do.

5

hi, @cherry

yes i did as it is you gave me

6

Can you show me your HomePage code ?

7 
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component
({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage 
{
  
  constructor(public navCtrl: NavController, public navParams: NavParams) 
  {
  }

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


  goToNotifications()
  {
    this.navCtrl.push('NotificationsPage');
  }

}

it will go inside the if condition but not going inside 
this 
Object.keys(tabs).map((key) =>
8 
My tabs.ts file is like this:-

tab1Root: string = 'Demo1Page';
tab2Root: string = 'Demo2Page';
tab3Root: string = 'Demo3Page';
tab4Root: string = 'Demo4`Preformatted text`Page';


  

  detail: NavParams;
  selectedIndex: number;
  constructor(public navCtrl: NavController, private params: NavParams) 
  {
    this.selectedIndex = params.data.tabIndex || 0;
    this.detail = params;
  }
9

Strange, Ive found a similar thread. Maybe this example here could work out.

let elements = document.querySelectorAll(".tabbar");

if (elements != null) {
    Object.keys(elements).map((key) =&gt; {
        elements[key].style.display = 'flex';
    });
}

Else check this link. Instead of using ‘none’ use ‘flex’ to display the tabbar.

10

Hi, @cherry

your code is also right

but it not worked on when we set root as homepage and we want to display home page with tabs

11

Oh I understand now, I am sorry I didn’t used tabs for a long time now.

You have to put HomePage as tab1Root = HomePage; but as I can follow your question you don’t want HomePage as a Tab and this is not possible with the Ionic tabs by default.

I’ve tried also some things out sadly without any luck.
You have todo a workaround or find a plugin wich supports this.

Maybe you could do a Timeout that you will automaticly push to the HomePage after a few milliseconds.

Or what would also be possible and more efficient: You set 5 Tabbaricons with a class to your HomePage icon in your html. Now you hide the HomePage icon, then with CSS you place the Demo1 button over the hidden HomePage button. And then you should have only 4 Tabbaricons with a disabled HomePage button.

Im sorry I can’t help you more atm :disappointed_relieved:

1 Like
12

Hi, @cherry

Thanks for suggestions

I hide home tabs

with css:-

.tabbar.show-tabbar a:first-child
 {
    display : none;
  }

it’s worked for me

2 Likes