CODEWITHSUNDEEP
ionic-frameworkionic2ionic3
Devansh sadhotra
Devansh sadhotra

Reputation: 1635

Back navigation button not showing up

I cloned the code using

ionic start myProjectName tutorial

and changed the project according to ionic 3 , now , there is a file list.html , it has a button at header which opens side menu. i wanted to have a back button over there ,and removed the code for side menu opening. Expected that back button would automatically show up , but it did not happen, instead it shows header without any button with just title written.

in this project , you will find list.html , and i have altered it as follows:

  <ion-header>
  <ion-navbar>
    <ion-title>My First List</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon name="{{item.icon}}" item-left></ion-icon>
      {{item.title}}
      <div class="item-note" item-right>
        {{item.note}}
      </div>
    </button>
  </ion-list>
</ion-content>

It just have a title , no back navigation button which could take me to root page

Upvotes: 1

Views: 1420

Answers (2)

Sau_Patil
Sau_Patil

Reputation: 358

You can add below code in app.component.ts

itemTapped(item) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.push(page.component);
 }

Upvotes: 2

Deepa
Deepa

Reputation: 184

Here some code for header in ionic.

<ion-view>
<ion-nav-bar>
    <ion-nav-buttons side="left">
        <button class="button button-clear  ion-arrow-left-c  " ng-click="backButton()"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button class="button button-clear btn-white ion-android-settings header-icon-size " ng-click="openDrawer()"></button>
    </ion-nav-buttons>
</ion-nav-bar>
<ion-content>
    <!-- here content -->
</ion-content>
</ion-view>

Let me know if it works for you ??

Upvotes: 0

Related Questions