In Ionic 4 is there anyway to determine if the back button is currently visible? In Ionic <= 3 when the back button was visible the menu button would be hidden (ie: back button replaced menu button). This is common on Android applications. In Ionic 4 this doesn’t happen and I can’t seem to find a way to do it.
In the previous beta I was doing a hacky approach where I checked the clientWidth of the back-button element (it was 0 when hidden). In Ionic 4 the back button uses a web component which completely encapsulates the presentation so that no longer works. There doesn’t seem to be any properties on back-button that would help (ie: visible).
There’s IonNav.canGoBack() but I’m pretty sure that doesn’t work with Angular-style routing. IonicRouter of Angular Router don’t seem to have anything help either.
What is the back button using under the hood to determine if it should be visible?
Just to be clear, what’s your goal? You’ve got a page where you want to display a back button in some conditions and in others you want to display the hamburger menu button or you have a another goal?
If your goal is the one I describe, what is really automatic in v3? I have that behavior and already in v3 I was managing it by my own. What I do is I pass a param to my view, if param is null or false I display the back button and if true I display the menu (“ngIf” in the template)
Just to be clear, what’s your goal? You’ve got a page where you want to display a back button in some conditions and in others you want to display the hamburger menu button or you have a another goal?
Ionic 4 has a back button that is shown automatically when a page has been “pushed”. When that is visible I want to hide the menu button, otherwise you get the two next to each other which looks weird. This is a common pattern on Android. Hamburger menu on top-level activity, but when an activity is pushed a back button is shown in its place.
If your goal is the one I describe, what is really automatic in v3? I have that behavior and already in v3 I was managing it by my own.
You had me thinking I was crazy but I just created a new Ionic 3 project based on the “sidemenu” template and it definitely does this automatically. If I go to the “List” page (top-level) the hamburger menu is shown. If I click one of the list items from there another List page is pushed and the back button is shown in place of the hamburger menu. The NavBar automatically shows the back button when a page is pushed and the menuToggle (by default) automatically hides when it’s not on the root page. I’m trying to get the same behavior in Ionic 4.
What I do is I pass a param to my view, if param is null or false I display the back button and if true I display the menu (“ngIf” in the template)
That’d definitely be a work-around but since the back-button component is already doing this magic it seems silly to go through passing that around all over the place. NavParams are deprecated for v4 and it doesn’t make sense as a route/query param since that’s more application state than navigation. I could make a service that basically does the same thing as NavParams but it makes more sense to tap into whatever logic that back button is already using.
But I mean in this example there are two different pages right? The main list contains the hamburger menu button and the page which is pushed contains the back button right? So it would be the same in v4, main page contains ion-menu-toggle and the sub page contains ion-back-button and it works out
That’s why I don’t understand exactly where the problem is, but I’m interested to help as much as I can
But I mean in this example there are two different pages right? The main list contains the hamburger menu button and the page which is pushed contains the back button right?
No, there is a single ListPage, the menu / back-button are displayed based on the navigation stack state. Here is the header from the page:
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
Notice in v3 there is no specific back-button component, it’s baked into the NavBar. Go ahead and spin-up a v3 project from the “sidemenu” template to see it in action.
The back button should be determined by navigation state, not the page or passing parameters. And this is how it works in v4. The back button only shows in instances when the user can navigate back. What I need to do is determine when it’s being shown so I can also hide the hamburger menu.
Ok no I understand, you are right, there is a single page and in v3 the back button is displayed automatically
Well that’s the thing I thing, in v4 the back button isn’t displayed anymore automatically. If you don’t add ion-back-button to your page, no back button will be displayed respectively it’s up to you to display hamburger menu or back button
Reference: https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#back-button
The back button is no longer added by default to a navigation bar. It should be explicitly written in a toolbar:
From ion-back-button: Custom Menu Back Button for Applications
The back button navigates back in the app’s history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack.
This does work. Even if you have on your page, it is hidden unless the user can navigate backwards. The section you quoted means there won’t be a back-button at all unless you add the element, but it still shows/hides automatically.
I’m going pull down the code and see if I can figure out what’s driving that.
As you wish, just tested to be sure I wasn’t saying something wrong and it was effectively the case. If you don’t add ion-back-button to your template there will be no back button aka back button isn’t automatically added
But feel free to spend time on it and correct me
I don’t want to be a pric here but are you not reading the posts you’re responding to? As I said, when you put ion-back-button on a page, it hides itself unless the user can navigate backwards. It’s clearly stated in the documentation.
The back button navigates back in the app’s history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack.
All I’m trying to do is determine when it is hidden vs shown.
Read it, but I guess my brain didn’t got it because a “it” or something might be missing in that sentence 
All clear now, thx for pointing that. Cool then, let me know what you come up as a solution
note, when I did the test I tried with navController.navigateForward, don’t know if there is a difference when you would navigate without using the navcontroller
1 Like
Figured it out. Ionic adds a “can-go-back” class to your page, ionic-back-button uses this to determine if it should be visible. Can hide the menu button with:
.can-go-back {
ion-menu-button {
display: none;
}
}
9 Likes
Cool cool cool might use it too 
I don’t see in inspect .can-go-back class. Where do you see it? how can I call it? I have 2 buttons when is forwarded…
thank in advance!
If you’re on a non-root page you should see the “can-go-back” class on the page element (whatever the selector is for the page you’re currently viewing). The class wont be there for root pages. Not sure what you mean by “call” it though. The above is just a global style you can add in globals.scss. If the “can-go-back” style exists on the page element it will hide any ion-menu-button instances.
Hello, I am facing the same problem with ionic 5, could you post your encoding? I couldn’t get it to work with .can-go-back.
Thanks
For me it still works with ionic 5. The class is added to the div with the class “ion-page”.
1 Like
hello gys when i am select the page in my side menu and go back with the help of mobile devide button but i am not able to go back any idea to resolve this ishu plese share solution .
thanks