A few months ago I wrote up a quick article about titles not correctly updating in Ionic V1 apps (Is your Ionic View title not updating?). Today I've run into another little issue with the header. I was working on a very quick demo for a presentation tonight and had an app with a grand total of two views - a master list and detail.

Everything was working fine, but then I noticed I didn't have a back button when looking at the detail view. As far as I could tell, my code was fine. Here's what I had in the index.html file:

<ion-nav-bar>
		<ion-nav-back-button>Back</ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

And each view was pretty simple as well. You can see the problem in action at this CodePen: http://codepen.io/cfjedimaster/pen/WxpPap. (I apologize for the formatting in the code - I was cutting and pasting rather quickly.)

I brought it up in the Slack chat and Mike Hartington came to the rescue rather quickly. Turns out the fix was... applying a class. Seriously. Even though the header has a class by default, if you don't explicitly specify one, then the back button won't show up. Literally - the fix is just this:

<ion-nav-bar class="bar-royal">
		<ion-nav-back-button>Back</ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

You can see this working in a CodePen Mike made for me: http://codepen.io/mhartington/pen/YWZBdK.

Obviously I think this is - well - bunk (grin) - so I'll filed a bug report for it here: Back button will not show up if you do not specify a class for the nav bar.

And in case you're curious - here is the "Before" picture of this mission-critical Enterprise demo:

And here is the "After" picture: