Change default ion-navbar "back" button ios

Ionic Framework ionic-v3
1

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

2

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',
  }
 })
8 Likes
3 
@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
4

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

6

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?

7

Ah, found it:

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

8

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

9

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

10

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
11

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

12

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";
}
13

can we change the back button icon ??

1 Like
14

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
15

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 ?

16

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

17

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
18

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

19

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
20

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

21

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