Ionic 4 - How to hide ion-back-button on a root page that is routed to dynamically?

Ionic Framework
1

Given the below markup, how do I hide the ion-back-button on a root page when that page is dynamically chosen at runtime? It seems logical to me that a back button would be hidden on a root page, or that there would at least be a “hideOnRoot” boolean option.

<ion-header>
	<ion-toolbar>
		<ion-buttons slot="start">
			<ion-back-button defaultHref="/home"></ion-back-button>
		</ion-buttons>
		<ion-title>{{title}}</ion-title>
	</ion-toolbar>
</ion-header>

I’ve seen suggestions that the button be omitted from the root page, but on startup my app decides which route/page to display, based on each user’s custom “default view” setting. Plus, I have lazy loaded pages that can appear anywhere in the page stack, root or below.

I tried having a single home page that displays page content in a sub component, and loading the sub component based on the user’s “default view” setting, but Ionic seems to have problems when ion-content is not a direct child component of a page, the height doesn’t seem to be calculated correctly.

I suppose I could try using a service to track the page stack count, but it feels hacky. Maybe I need to write a custom directive, but how would a directive find out if it’s on the root page of the router outlet?

Any help or suggestions would be much appreciated! :slight_smile:

1 Like
2

what language is this? Angular? React? or Vue?

3

Hi Aaron, thanks for your response. It’s Angular

4

you can use ActivatedRoute to get the current route and hide/show the back button
https://angular.io/api/router/ActivatedRoute

5

Thanks Aaron. This is where I might be missing something. How does a page know that it’s the root page by looking at ActivatedRoute?

Say I have lots of routes and at startup, depending on the user’s preferences, the app may call any one of:

navController.navigateRoot('/home/page1')
navController.navigateRoot('/home/page2')
navController.navigateRoot('/home/page3')

Then later, the user might select a page from the menu, e.g:

navController.navigateRoot('/home/page4')

Without tracking the route url at the point where the last call was made, how would the page/root find out if it’s on the root page?

Later, we might call:

navController.navigateForward('/home/page1')

In which case we might have a stack of:

root page url = ‘/home/page1’
child page url = ‘/home/page2’

or:

root page url = ‘/home/page3’
child page url = ‘/home/page1’
child page url = ‘/home/page2’
child page url = ‘/home/page3’

or any other permutation.

I’m not clear how a page could know it needs to hide the back button if that route/page can appear anywhere in the page stack.

I hope I’m making sense…

6

Maybe the least painful solution is to have two routes for each page that can appear at either the root or a child of a router outlet.

E.g. for “page1” there are two routes:

'/home/route-page1' (for “root page” route)
'/home/child-page1' (for “child page” route)

Then just hide/show the button depending on which route is selected via ActivatedRoute. I think I’ll try this approach for now.