Bobcares

WeSupport

Call Us! 1-800-383-5193
Call Us! 1-800-383-5193
Call Us! 1-800-383-5193

Need Help?

Emergency Response Time custom

Our experts have had an average response time of 12.45 minutes in December 2020 to fix urgent issues.

We will keep your servers stable, secure and fast at all times for one fixed price.

Hiding and Showing Tabs on certain pages

by | Jan 8, 2021

Ionic uses Angular’s routing system which allows makes hiding and showing tabs on certain pages while leaving it visible everywhere else makes it easier.

Here at Bobcares, we have seen several such App-related queries as part of our Development Services for developers.

Today, we will take a look at the process of hiding and showing tabs on certain pages.

 

Hiding and Showing Tabs on certain pages

Now let’s see how our Engineers hide and show tabs on certain pages.

 

1. Create a new Ionic Tab Application

First, we will create an Ionic application using the latest Ionic CLI.

$ npm install -g @ionic/cli

Next, we create a new Angular Ionic tab application using to hide tabs from some pages and display it in other pages.

$ ionic start IonicComponents tabs –type=angular

 

2. Create a new service

Now, we will create the service provider by running the below command.

$ ionic g service tab

Next, we need to import the service into our app.modules.ts provider array, as well as importing it into our app.component.ts file, in our constructor.

app.module.ts

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
...
],
providers: [
TabsService
...
],
bootstrap: [AppComponent],
})
export class AppModule {
}

app.component.ts

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})
export class AppComponent {
constructor(public tabs: TabsService) {
...
}
...
}

 

3. Configure the TabsService provider

First we will create a new variable called hideTabBarPages. This is a string array, that we will use to tell Ionic what pages to hide our tab bar on.

hideTabBarPages = [
'login',
'registration',
'forgot-password',
];

Next, in the constructor, we should import the Router and the Platform providers like so:

constructor(private router: Router, private platform: Platform) {
this.platform.ready().then(() => {
console.log('Core service init');
this.navEvents();
});
}

The NavEvents function will handle our navigation events.

navEvents() {
this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: any) => {
console.log(e);
this.showHideTabs(e);
});
}

We are using the router.events Observable for filtering out the events so that we only get the NavigationEnd events, and then run another function with the event data. The reason we’re filtering out certain events is that Angular triggers a number of lifecycle events, whenever we navigate to a page. If we didn’t do this, the inner function this.showHideTabs(e) would be called numerous times with every page change.

showHideTabs(e: NavigationEnd) {
const urlArray = e.url.split('/');
const pageUrlParent = urlArray[urlArray.length - 2];
const pageUrl = urlArray[urlArray.length - 1];
const page = pageUrl.split('?')[0];
const hideParamPage = this.routeParamPages.indexOf(pageUrlParent) > -1 && !isNaN(Number(page));
const shouldHide = this.hideTabBarPages.indexOf(page) > -1 || hideParamPage;
try {
setTimeout(() => shouldHide ? this.hideTabs() : this.showTabs(), 300);
} catch (err) {
}
}

~~

The showHideTabs function will handle whether it should show the tabs or hide it depending on the page we navigate to.

The e: NavigationEnd event will have the following information in it.

  • First, we need to get the event URL in a format that we can use it.
  • Then we will grab the last page URL in the path.
  • We need to remove the parameters since we only want the page name. The parameters that passing is shown after the ? Character.
  • The last thing that we need to do in this function is to check if we should hide this particular page or not. Lastly, we will need to actually hide the tabs if, or show them if they’ve been previously hidden.

Basically, it says that if ShouldHide is true, then run this.hideTabs() if shouldHide is false run this.showTabs().

 

4. Handling Pages with Route Parameters

Route parameters i.e: ‘product-details/:id’ will not automatically work with our current implementation. For that, we need to create a new public variable called routeParamPages, it’s a string array.

routeParamPages: string[] = [
'tabs1',
];

Below, the pageUrlParent is a new variable. This is similar to the pageUrl variable. But instead of grabbing the page, we’re navigating to from the urlArray. We’re going to grab the parent of that page.

const pageUrlParent = urlArray[urlArray.length – 2];
const hideParamPage = this.routeParamPages.indexOf(pageUrlParent) > -1 && !isNaN(Number(page));

This will tell us if the page is a routeParamPage, and if it needs to be hidden.
If the page we are navigating to has any non-numeric characters, this will evaluate to Nan(Not A Number). Lastly, we are checking that the converted Number(page) is not Nan through, isNan(Number(page)). Then we just have to track on an orstatement to our shouldHide variable

const shouldHideTabs = this.hideTabBarPages.indexOf(page) > -1 || hideParamPage;

 

Create the hideTabs() & showTabs() functions. Here is the code that we add.

public hideTabs() {
const tabBar = document.getElementById('myTabBar');
if (tabBar.style.display !== 'none') tabBar.style.display = 'none';
}
public showTabs() {
const tabBar = document.getElementById('myTabBar');
if (tabBar.style.display !== 'flex') tabBar.style.display = 'flex';
}

We check to make sure that the tabBar is not null. This way we ensure that our service doesn’t throw an error when navigating on a page that doesn’t have a tabBar such as app-login. Flex for if we’re going to show the tabs and none if we’re going to hide them.

Finally, after all the changes the tabService will look like this.

import { Injectable } from '@angular/core';
import { filter } from 'rxjs/operators';
import { NavigationEnd, Router } from '@angular/router';
import { Platform } from '@ionic/angular';
@Injectable({
providedIn: 'root',
})
export class TabsService {
hideTabBarPages = [
'login',
'registration',
'forgot-password',
];
routeParamPages: string[] = [
'tabs1',
];
constructor(private router: Router, private platform: Platform) {
this.platform.ready().then(() => {
console.log('Core service init');
this.navEvents();
});
}
public hideTabs() {
const tabBar = document.getElementById('myTabBar');
if (tabBar.style.display !== 'none') tabBar.style.display = 'none';
}
public showTabs() {
const tabBar = document.getElementById('myTabBar');
if (tabBar.style.display !== 'flex') tabBar.style.display = 'flex';
}
private navEvents() {
this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: any) => {
console.log(e);
this.showHideTabs(e);
});
}
private showHideTabs(e: any) {
const urlArray = e.url.split('/');
const pageUrlParent = urlArray[urlArray.length - 2];
const pageUrl = urlArray[urlArray.length - 1];
const page = pageUrl.split('?')[0];
const hideParamPage = this.routeParamPages.indexOf(pageUrlParent) > -1 && !isNaN(Number(page));
const shouldHide = this.hideTabBarPages.indexOf(page) > -1 || hideParamPage;
try {
setTimeout(() => shouldHide ? this.hideTabs() : this.showTabs(), 300);
} catch (err) {
}
}
}

Finally, we will add an ID to the tabBar element in app.component.html

<ion-tab-bar slot="bottom" #myTabBar id="myTabBar">

On checking, we can see that the tabs automatically hide when we navigate to a page in the hideTabBarPages array.

For instance, here are the images of pages without tabs on the Login page and with tabs on the home page.

Hiding & Showing Tabs on certain pages                                Hiding & Showing Tabs on certain pages

[Need any further assistance in hiding the tabs? – Our experts can help you]

 

Conclusion

Today, we saw how our Engineers hide and show tabs on certain pages.

PREVENT YOUR SERVER FROM CRASHING!

Never again lose customers to poor server speed! Let us help you.

Our server experts will monitor & maintain your server 24/7 so that it remains lightning fast and secure.

GET STARTED

var google_conversion_label = "owonCMyG5nEQ0aD71QM";

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Related Posts

Categories:

Tags: