CODEWITHSUNDEEP
iosionic-frameworkionic3angular5
Kirubel
Kirubel

Reputation: 1627

Change ionic back button text like in IOS

I wanted to change the ionic back button text with previous page view name like in iPhone. If it navigates from Users to User detail I wanted the back text to be changed to Users in user detail page view.

For now this is what I got from browsing for a solution.

imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement: 'top',
      backButtonText: 'Back',
      iconMode: 'ios',
      modalEnter: 'modal-slide-in',
      modalLeave: 'modal-slide-out',
      tabbarPlacement: 'bottom',
      pageTransition: 'ios'
     })
  ]

This will change the default. How can I change backButtonText value with page name from stack programmatically.

Upvotes: 1

Views: 1245

Answers (1)

MiracleMike
MiracleMike

Reputation: 86

To dynamically change the back button text, you can use the ViewContoller.setBackButtonText() method. See: https://ionicframework.com/docs/api/navigation/ViewController/

To get the previous page title, you should probably look for what the NavController.last() can give you.

Inject the ViewController into your component.

import { ViewController } from 'ionic-angular';
constructor(private viewController: ViewController) {}

Then you need to set the text in one the component lifecycle event that happen after the DOM is loaded:

ionViewDidLoad() {
    this.viewController.setBackButtonText('My Back Button Text');
}

See Ionic "Lifecycle events" doc to find which one fits your need. https://ionicframework.com/docs/api/navigation/NavController/

I give all the code credit (and thanks) to the gentleman of the following answer: https://stackoverflow.com/a/42013787/1321664

Upvotes: 2

Related Questions