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

@MarkL wrote:

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 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 my own directive, but how could it find out if it’s on the root of the router outlet?

Any help or suggestions would be much appreciated!

Posts: 1

Participants: 1

Read full topic