CODEWITHSUNDEEP
ionic-framework
William Redmond
William Redmond

Reputation: 11

Ionic custom back button on single page

I looked at: https://ionicframework.com/docs/api/config/Config/

This page used an example where the tabsPlacement on ion-tabs was changed for that one element.

I tried to recreate this with: 

<ion-header>

<ion-navbar backButtonIcon="close">
  <ion-title>settings-edit</ion-title>
</ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

There doesn't seem to be any changes with the navBar back button

Upvotes: 0

Views: 248

Answers (2)

Balakrishnan Bsk
Balakrishnan Bsk

Reputation: 493

There is no custom back button option in ionic simply change it as the button

 <ion-header>
      <ion-navbar hideBackButton="true">
       <button ion-button menuToggle hideBackButton="true">
            <ion-icon name="md-close" (click)="close()" ></ion-icon>
          </button>
      <ion-title>settings-edit</ion-title>
        </ion-navbar>
    </ion-header>

Try This Code and add below TS code in your page

close()
{
    this.navctrl.pop();
}

Upvotes: 1

Jonathan
Jonathan

Reputation: 1

As in the documentation, you should define it it in your app.module.ts

Add this to your @NgModule:

 imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      backButtonIcon: 'close',
      iconMode: 'ios',
      modalEnter: 'modal-slide-in',
      modalLeave: 'modal-slide-out',
      tabsPlacement: 'bottom',
      pageTransition: 'ios-transition'
    }) 
  ]

Upvotes: 0

Related Questions