Change default ion-navbar "back" button ios

Hey , can someone tell me please where can i find this button text ,
i trying to change it text, but i can’t find this button .

Thanks in advance :slight_smile:

image

Check out the config docs over here. In short, you can specify this in your app.ts, by adding some extra configuration over there.

Example from the docs:

 @App({
    template: `<ion-nav [root]="root"></ion-nav>`
    config: {
        backButtonText: 'Go Back',
        iconMode: 'ios',
        modalEnter: 'modal-slide-in',
        modalLeave: 'modal-slide-out',
        tabbarPlacement: 'bottom',
        pageTransition: 'ios',
  }
 })
7 Likes
@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {
    platforms: {
   ios: {
     backButtonText: 'text',
     }
   }
 } // http://ionicframework.com/docs/v2/api/config/Config/
})

if you want to target a specific platform

2 Likes

Thank for quick reply , that’s exactly what i’m looking for !! have a great day

Is there a way to change the back button text on a single page? I’ve tried a few methods but none seem to work. Is the only way to hide the back button and add a custom back button instead?

Ah, found it:

http://ionicframework.com/docs/v2/api/components/nav/ViewController/#setBackButtonText

Hi. How do you add a custom back button on one specific page? Which doesnt have a navbar.

Hi, use a toolbar instead. Inside the toolbar, add a custom back button with custom behaviour.

Did someone tried to have it without a label? when i put:

    platforms: {
        ios: {
            backButtonText: ''
        }
    }

The button is too small, and putting &nbsp; doesn’t work since it’s escaped.

1 Like

If the button becomes to small, you could also set the text color equal to the header color perhaps?

We can change the dom of the back button?

Edit:
Ugly but it works

.back-button-text .back-default::after {
    content: "\00a0\00a0\00a0\00a0\00a0";
}

can we change the back button icon ??

1 Like

Yes just add this line of code inside your config: backButtonIcon: 'arrow-back',. This example creates the arrow-back icon, for more information read the docs @luukschoen mentioned in his post

1 Like

I want it to be dynamic and change with the direction of the application, and not static
can it change from the view controller from any page of the application ?

Hi,
How do i override the back button action in ionic 2.
can you please share the code ?

Create your own back button:

<ion-header>

<ion-navbar>
	<ion-buttons left>
		<button ion-button navPop icon-only>
			<ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
		</button>
	</ion-buttons>
</ion-navbar>

</ion-header>
4 Likes

Not working for me, I see always the back button.

To also be able to translate the button change the button text in the app component.

Example using ng2-translate:

import { Config } from 'ionic-angular';
import { TranslateService } from 'ng2-translate';

...

constructor( translate: TranslateService, private config: Config ) {
    this.translate.setDefaultLang('no_nb');
    this.translate.use('no_nb');
    this.initializeApp();

}

initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      this.translate.get('BACK').subscribe((res: string) => {
        // Let android keep using only arrow
        this.config.set('ios', 'backButtonText', res);
       // To cange label for all platforms: this.config.set('backButtonText', res);
      });
    });
  }
10 Likes

How can it be done in the new version (2.3.0)? There’s no “initializeApp” method now.

This one work for me, but how to remove the word ‘back’