Ionic: how show back button

Question

In ionic i have a login page with this directive:

<ion-view hide-nav-bar="true" class="home-background">

I use the hide-nav-bar to hide the navigation bar.

Then i transition to another page where i show the navigation bar and, in the template, i have:

<ion-view view-title="Chat">

Now the navigation bar is showed without back button (and it's ok this behaviour).

From this page i go to a detail page and i have:

<ion-view view-title="Chat Detail">

The problem now is that i don't see the back button. Inspecting the page i see:

Why there is hide class? How can i show the back button?

Karen Forde Karen Forde · Accepted Answer · 2016-06-09T16:47:36

You need to add an ion-nav-bar to your page and then an ion-nav-back-button. See example below. You can customize it whatever way you want. Below uses an ionicon chevron back arrow to get Android-style arrow.

<ion-view view-title="Chat Detail">
    <ion-nav-bar>
        <ion-nav-back-button class="button-clear" ng-click="back()">
            <i class="ion-chevron-left top-nav-bar-icon"></i>
        </ion-nav-back-button>
    </ion-nav-bar>

...
</ion-view>

Ionic: how show back button

1 Answers