Removing the back button text in Ionic Framework Apps

December 27, 2015, 10:40 pm
Author: James Griffiths

There's no doubt that the Ionic Framework makes developing Mobile Apps easier to accomplish but as great as the framework is the documentation can sometimes be a little lacking.

This is especially true where it comes to figuring out how to hide the back button text in iOS Apps.

Resolving this however is quite straightforward.

Locate the app.js file for your project and under the following run method:

.run(function($ionicPlatform) 
{

  // Initialisation code for your App contained in here

})

Place the following configuration block:

.config(function($ionicConfigProvider) 
{
  // Remove back button text completely
  $ionicConfigProvider.backButton.previousTitleText(false).text('');
})

This declaration, using the $ionicConfigProvider (which helps manage system specific configuration options), instructs Ionic to configure our back button to:

  • Not use the previous title for the back button text content
  • And set the text to an empty string

By placing this in the app.js bootstrap file we ensure that the configuration is made globally available to our App. If we had placed this in a single controller this would only be scoped to the view that the controller is associated with meaning that navigating to other views would NOT hide the back button text.

Now, when you rebuild and republish your App to an iOS device, you should notice the back button text no longer displays as you navigate between different screens.

Categories

« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.