ionic ion-nav-back-button is hidden

Question

I try to do a page view with a ion-nav-back-button.

This is my code html.

<ion-nav-bar class="bar-main">
  

    <ion-nav-back-button class="button-clear" side="left">
        <ion-icon name="edit" role="img" class="ion-arrow-left-c menu-icon" arial-label="back">

        </ion-icon>
    </ion-nav-back-button>
    
      <ion-nav-buttons side="right">
        <button class="button button-clear" ui-sref="editevent( { idevent : event.$id } )">

            <ion-icon name="edit" role="img" class="ion-edit menu-icon" arial-label="edit">

            </ion-icon>
        </button>
    </ion-nav-buttons>
    

   
</ion-nav-bar>

<ion-view  class="content">
    <ion-nav-title>{{event.title}}</ion-nav-title>
    <ion-content class="background-white">
        <div class="event_view-desc" >{{event.description}}</div>
             

</ion-content>
</ion-view>

But this page not show the ion-nav-back-button. I have do a mistake?

the code html generate is:

<ion-header-bar class="bar-main bar bar-header" align-title="center"><button class="button back-button buttons hide button-clear header-item" side="left" ng-click="$ionicGoBack()" style="transition-duration: 0ms;">
            <ion-icon name="edit" role="img" class="ion-arrow-left-c menu-icon" arial-label="back">

            </ion-icon>
        <span class="back-text" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);"><span class="default-title">Back</span><span class="previous-title hide"></span></span></button><div class="title title-center header-item" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); left: 36px; right: 36px;"><span class="nav-bar-title ng-binding">geo3</span></div><div class="buttons buttons-right header-item" style="transition-duration: 0ms;"><span class="right-buttons">
            <button class="button button-clear" ui-sref="editevent( { idevent : event.$id } )" href="#/editevent/-KDScn4Yw3uEryrNT8ow">

                <ion-icon name="edit" role="img" class="ion-edit menu-icon" arial-label="edit">

                </ion-icon>
            </button>
        </span></div></ion-header-bar>

why my back-button content the hide class?

Jur Clerkx Jur Clerkx · Accepted Answer · 2016-03-22T13:53:13

This is because this is the default built in Ionic back button. They've built in this function so you don't have to do all the programming yourself. This button only shows up when you've got the option to go back a page.

So let's say you have a list, and when you click on a item there opens a new page with all the info about the item. On that page, the back button will show up because you can go back a page.

When you just want a button with the back icon, check out www.ionicons.com. You can use one of those with just a normal button.

ionic ion-nav-back-button is hidden

1 Answers