Configure the TabsService provider

When you first open up the new service provider, you should see the default template below.

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



@Injectable({

providedIn: 'root'

})

export class TabsService {



constructor() { }

}

Next, we’ll create a new private variable called hideTabBarPages . This is a string array, that we’ll use to tell Ionic what pages to hide our tab bar on. As you can see, I want to hide the tab bar on a page called new-group . But you can change this to include whatever you want.

private hideTabBarPages: string[] = [

'new-group',

];

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

constructor(private router: Router, private platform: Platform) {

this.platform.ready().then(() => {

this.navEvents();

});

}

All this does is wait for the platform to be ready before we do anything, as we can’t hide tabs that aren’t created yet, now can we?

Now we’ll go ahead and hook up the above function called NavEvents , which will handle our navigation events for us. It’s a pretty simple function, and really only a container for the router.events subscription.

this.router.events

.pipe(filter((e) => e instanceof NavigationEnd))

.subscribe((e: any) => {

this.showHideTabs(e);

});

All we’re doing is subscribing to the router.events Observable, 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, which isn’t ideal.

Now we should create our function showHideTabs() . This is what will handle whether the tabs should be shown, or hidden depending on the page we navigated to.

private showHidetabs(e: NavigationEnd) {

...

}

The e: NavigationEnd event will have the following information in it. This will be different depending on the page that you’re navigating to.

{

id: 13

url: "/tabs/groups/new-group?type=msg"

urlAfterRedirects: "/tabs/groups/new-group?type=msg"

}

First, we need to get the event URL in a format that we can use.

const urlArray = e.url.split('/');

// Result: urlArray: ["", "tabs", "groups", "new-group?type=group"]

Next, we’ll grab the last page URL in the path.

// Grab the last page url.

const pageUrl = urlArray[urlArray.length - 1];

// Result: new-group?type=group

Since we’re left with new-group?type=group , we need to remove the parameters, since we only want the page name. The parameters that I’m passing are shown after the ? character, as ?type=group . You should include this regardless, as it future proof’s your code.

// Remove the parameters from the URL.

const page = pageUrl.split('?')[0];

// Result: new-group

One of the last things we need to do in this function is check if we should hide this particular page or not.

// Check if we should hide or show tabs.

const shouldHide = this.hideTabBarPages.indexOf(page) > -1;

// Result: true

Lastly, we’ll need to actually hide the tabs if, or show them if they’ve been previously hidden.

shouldHide ? this.hideTabs() : this.showTabs()

The logic is mostly explained in the comments, but if you’re confused about the line shouldHide ? this.hideTabs() : this.showTabs() , this is called a ternary operator, which is a fancy way of writing an if / else statement.