Change default ion-navbar "back" button ios

Ionic Framework ionic-v3
22

you can use hideBackButton attribute on ion-navbar and replace your custom icon or anything

<ion-header>
  <ion-navbar color='danger' hideBackButton>
    <ion-title>product page</ion-title>
    	<ion-buttons left>
		<button ion-button navPop icon-only>
              <ion-icon ios="ios-arrow-forward" md="md-arrow-forward"></ion-icon>
		</button>
	</ion-buttons>
  </ion-navbar>
</ion-header>
1 Like
23

In app.module.ts:

@NgModule({
	declarations: [
		MyApp
	],
	imports: [
		BrowserModule,
		IonicModule.forRoot(MyApp, {
			platforms: {
				ios: {
					backButtonText: 'Voltar'
				}
			}
		}),
	],
	bootstrap: [IonicApp],
	entryComponents: [
		MyApp
	],
	providers: [
		StatusBar,
		SplashScreen,
		{provide: ErrorHandler, useClass: IonicErrorHandler}
	]
})
7 Likes
24

This!!
Simple and perfect.
Thanks

25

You nailed it!! How can I replace the back arrow with a custom one?

26

Thank you, it worked!

27

I also want to target a specific platform using ionic/angular 4.4.0 .I want to show “back” button text only in case of ios but not in case of Android. Unable to achieve by above method.Getting following error

error
error.JPG821×221 17.1 KB
.

When i hover over “platforms” it gives following error = “Expected 0-1 arguments, but got 2.ts(2554)”

28

Ionic 4
IonicModule.forRoot({ backButtonText: ‘’ })

2 Likes