Ionic 4 — Hiding & Showing Tabs on certain pages

So what should we do for Ionic 4?

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
...
],
providers: [
TabsService
...
],
bootstrap: [AppComponent],
})
export class AppModule {
}
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})
export class AppComponent {
constructor(public tabs: TabsService) {
...
}
...
}

Configure the TabsService provider

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class TabsService {

constructor() { }
}
private hideTabBarPages: string[] = [
'new-group',
];
constructor(private router: Router, private platform: Platform) {
this.platform.ready().then(() => {
this.navEvents();
});
}
this.router.events
.pipe(filter((e) => e instanceof NavigationEnd))
.subscribe((e: any) => {
this.showHideTabs(e);
});
private showHidetabs(e: NavigationEnd) {
...
}
{
id: 13
url: "/tabs/groups/new-group?type=msg"
urlAfterRedirects: "/tabs/groups/new-group?type=msg"
}
const urlArray = e.url.split('/');
// Result: urlArray: ["", "tabs", "groups", "new-group?type=group"]
// Grab the last page url.
const pageUrl = urlArray[urlArray.length - 1];
// Result: new-group?type=group
// Remove the parameters from the URL.
const page = pageUrl.split('?')[0];
// Result: new-group
// Check if we should hide or show tabs.
const shouldHide = this.hideTabBarPages.indexOf(page) > -1;
// Result: true
shouldHide ? this.hideTabs() : this.showTabs()
// Not ideal to set the timeout, but I haven't figured out a better method to wait until the page is in transition...
try {
setTimeout(() => shouldHide ? this.hideTabs() : this.showTabs(), 300);
} catch (err) {}
routeParamPages: string[] = [
'product-details',
];
const pageUrlParent = urlArray[urlArray.length - 2];
// handle param pages
const hideParamPage = this.routeParamPages.indexOf(pageUrlParent) > -1 && !isNaN(Number(page));
const shouldHideTabs = this.hideTabBarPages.indexOf(page) > -1 || hideParamPage;

Create the hideTabs() & showTabs() functions.

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

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

Lastly

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

That’s it!

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 = [
'new-group',
];
routeParamPages: string[] = [
'product-details',
];
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';
}

// A simple subscription that tells us what page we're currently navigating to.
private navEvents() {
this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: any) => {
console.log(e);
this.showHideTabs(e);
});
}

private showHideTabs(e: any) {
// Result: e.url: "/tabs/groups/new-group?type=group"

// Split the URL up into an array.
const urlArray = e.url.split('/');
// Result: urlArray: ["", "tabs", "groups", "new-group?type=group"]
// Grab the parentUrl
const pageUrlParent = urlArray[urlArray.length - 2];
// Grab the last page url.
const pageUrl = urlArray[urlArray.length - 1];
// Result: new-group?type=group

const page = pageUrl.split('?')[0];
// Result: new-group
// Check if it's a routeParamPage that we need to hide on
const hideParamPage = this.routeParamPages.indexOf(pageUrlParent) > -1 && !isNaN(Number(page));
// Check if we should hide or show tabs.
const shouldHide = this.hideTabBarPages.indexOf(page) > -1 || hideParamPage;
// Result: true

// Not ideal to set the timeout, but I haven't figured out a better method to wait until the page is in transition...
try {
setTimeout(() => shouldHide ? this.hideTabs() : this.showTabs(), 300);
} catch (err) {
}
}
}

Questions?

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store