Custom back button to navigate up a state tree

I’ve created a custom back button for ionic’s navbar that goes up the state tree when there isn’t any history to go back to. This is useful for me, since I’m using ionic as a web app (not hybrid) and the users can refresh the page, leaving them in a tab’s nested state, with no way to go back. Also, using this technique, you can link to a state from Tab A that opens up in Tab B and the back button still appears, navigating to the parent state of Tab B.

I’ve seen a few posts of people trying figure this out, so I thought I’d share my implementation. There may be a few unforeseen bugs. Hope this is useful to someone!

1 Like

Hmm… Can’t figure out how to embed the code pen. Looks like the link works, though.

The codepen will embed when you put the url on a line on it’s own with an empty line above and an empty line beneath it as well :wink: I like your solution btw!

Aha! I think that did it! Although, nothing shows up in the results view.

Well, this is now broken with 1.0.0-beta14.

Yeah. My app is still on the previous version. I need to re-evaluate my implementation based on the changes. I don’t think it will be too hard. I’ll try to post an update when I get to it.

@allan I’ve updated the code to work with the latest beta. Instead of using a custom element for the nav-back-button, I made it an attribute directive that you add to <ion-nav-back-button>.

E.g. <ion-nav-back-button state-nav-back-button>

4 Likes