How to change the label from back button in Ionic 2?
With the code:
<ion-navbar *navbar>
</ion-navbar>
the back button is enabled. But I need to customize it (the icon or the label). Is it possible?
Can't find anything in the docs/api.
javascript ionic-framework ionic2
add a comment |
With the code:
<ion-navbar *navbar>
</ion-navbar>
the back button is enabled. But I need to customize it (the icon or the label). Is it possible?
Can't find anything in the docs/api.
javascript ionic-framework ionic2
add a comment |
With the code:
<ion-navbar *navbar>
</ion-navbar>
the back button is enabled. But I need to customize it (the icon or the label). Is it possible?
Can't find anything in the docs/api.
javascript ionic-framework ionic2
With the code:
<ion-navbar *navbar>
</ion-navbar>
the back button is enabled. But I need to customize it (the icon or the label). Is it possible?
Can't find anything in the docs/api.
javascript ionic-framework ionic2
javascript ionic-framework ionic2
asked Mar 7 '16 at 18:00
Christian BenselerChristian Benseler
4,99652444
4,99652444
add a comment |
add a comment |
6 Answers
6
active
oldest
votes
you can set back button text in your app.html as mentioned in the ionic link http://ionicframework.com/docs/v2/api/config/Config
@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',
)
UPDATE in ionic 2 beta 8
import ionicBootstrap from 'ionic-angular';
ionicBootstrap(AppRoot, customProviders,
backButtonText: 'Go Back',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabbarPlacement: 'bottom',
pageTransition: 'ios',
);
UPDATE in ionic 2 rc.0 and up, as well as ionic 3
In ionic 2 rc.0 and up, we need to include the configs in app.module.ts under imports array.
@NgModule(
declarations: [
MyApp,
Home
],
imports: [
IonicModule.forRoot(MyApp,
tabsPlacement: 'top',
backButtonText: 'Back'
)],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Home ],
providers: [MyService]
)
Hi. Is it possible to change the icon and text on the back button for one specific page?
– user3607282
May 31 '16 at 10:04
2
I have not tried it. Just look at setBackButtonText() in ionicframework.com/docs/v2/api/components/nav/ViewController/…. Hope it helps
– AishApp
May 31 '16 at 10:08
add a comment |
The current version of IONIC2 allows you to change the text of the back-button globally.
You can also change the icon like it appears in ios and hide the "Back"
label.
imports: [
IonicModule.forRoot(MyApp,
backButtonText: '',
backButtonIcon: 'ios-arrow-back',
iconMode: 'md'
)
]
Just add this one to your app.module.ts
.
in current version "3.12.1" this is the answer
– Andres Felipe
Sep 12 '17 at 16:44
add a comment |
I've just spent a while working out how to do this via the ViewController in Ionic 2.
Inside the typescript file for your page you must import the ViewController
import ViewController from 'ionic-angular';
Then in your constructor function include the ViewController.
constructor(public viewCtrl: ViewController)
Then finally you can call the function to change the text.
ionViewDidLoad()
this.viewCtrl.setBackButtonText('Cancel');
I basically cobbled this together from how I'd been doing Alerts and Nav Controller stuff so I may be wrong. It's working for me though and has the benefit of allowing me to change the text on a per page basis.
add a comment |
I didn't find any documentation for this either. But I have found the file that sets the text and the class of the button, so you can edit it there (it will change the button text/class in every page).
Change the attribute backButtonText
in node_modules/ionic-framework/config/modes.js
add a comment |
If you are using ionic 4 you can set back button text like this
<ion-back-button [text]="'<your text>'"></ion-back-button>
add a comment |
Here official documentation https://ionicframework.com/docs/v3/api/config/Config/
there is a good example of usage in the ionic 3 starter app
In costructor of app.component.ts is used "set" method used of Config object from ionic-angular:
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
Is usefull when you want to use internationalization or if you want change configs dynamically:
this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35850685%2fhow-to-change-the-label-from-back-button-in-ionic-2%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
you can set back button text in your app.html as mentioned in the ionic link http://ionicframework.com/docs/v2/api/config/Config
@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',
)
UPDATE in ionic 2 beta 8
import ionicBootstrap from 'ionic-angular';
ionicBootstrap(AppRoot, customProviders,
backButtonText: 'Go Back',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabbarPlacement: 'bottom',
pageTransition: 'ios',
);
UPDATE in ionic 2 rc.0 and up, as well as ionic 3
In ionic 2 rc.0 and up, we need to include the configs in app.module.ts under imports array.
@NgModule(
declarations: [
MyApp,
Home
],
imports: [
IonicModule.forRoot(MyApp,
tabsPlacement: 'top',
backButtonText: 'Back'
)],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Home ],
providers: [MyService]
)
Hi. Is it possible to change the icon and text on the back button for one specific page?
– user3607282
May 31 '16 at 10:04
2
I have not tried it. Just look at setBackButtonText() in ionicframework.com/docs/v2/api/components/nav/ViewController/…. Hope it helps
– AishApp
May 31 '16 at 10:08
add a comment |
you can set back button text in your app.html as mentioned in the ionic link http://ionicframework.com/docs/v2/api/config/Config
@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',
)
UPDATE in ionic 2 beta 8
import ionicBootstrap from 'ionic-angular';
ionicBootstrap(AppRoot, customProviders,
backButtonText: 'Go Back',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabbarPlacement: 'bottom',
pageTransition: 'ios',
);
UPDATE in ionic 2 rc.0 and up, as well as ionic 3
In ionic 2 rc.0 and up, we need to include the configs in app.module.ts under imports array.
@NgModule(
declarations: [
MyApp,
Home
],
imports: [
IonicModule.forRoot(MyApp,
tabsPlacement: 'top',
backButtonText: 'Back'
)],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Home ],
providers: [MyService]
)
Hi. Is it possible to change the icon and text on the back button for one specific page?
– user3607282
May 31 '16 at 10:04
2
I have not tried it. Just look at setBackButtonText() in ionicframework.com/docs/v2/api/components/nav/ViewController/…. Hope it helps
– AishApp
May 31 '16 at 10:08
add a comment |
you can set back button text in your app.html as mentioned in the ionic link http://ionicframework.com/docs/v2/api/config/Config
@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',
)
UPDATE in ionic 2 beta 8
import ionicBootstrap from 'ionic-angular';
ionicBootstrap(AppRoot, customProviders,
backButtonText: 'Go Back',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabbarPlacement: 'bottom',
pageTransition: 'ios',
);
UPDATE in ionic 2 rc.0 and up, as well as ionic 3
In ionic 2 rc.0 and up, we need to include the configs in app.module.ts under imports array.
@NgModule(
declarations: [
MyApp,
Home
],
imports: [
IonicModule.forRoot(MyApp,
tabsPlacement: 'top',
backButtonText: 'Back'
)],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Home ],
providers: [MyService]
)
you can set back button text in your app.html as mentioned in the ionic link http://ionicframework.com/docs/v2/api/config/Config
@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',
)
UPDATE in ionic 2 beta 8
import ionicBootstrap from 'ionic-angular';
ionicBootstrap(AppRoot, customProviders,
backButtonText: 'Go Back',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabbarPlacement: 'bottom',
pageTransition: 'ios',
);
UPDATE in ionic 2 rc.0 and up, as well as ionic 3
In ionic 2 rc.0 and up, we need to include the configs in app.module.ts under imports array.
@NgModule(
declarations: [
MyApp,
Home
],
imports: [
IonicModule.forRoot(MyApp,
tabsPlacement: 'top',
backButtonText: 'Back'
)],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Home ],
providers: [MyService]
)
edited Dec 31 '17 at 6:54
user276648
3,26733971
3,26733971
answered Mar 8 '16 at 8:58
AishAppAishApp
3,74722132
3,74722132
Hi. Is it possible to change the icon and text on the back button for one specific page?
– user3607282
May 31 '16 at 10:04
2
I have not tried it. Just look at setBackButtonText() in ionicframework.com/docs/v2/api/components/nav/ViewController/…. Hope it helps
– AishApp
May 31 '16 at 10:08
add a comment |
Hi. Is it possible to change the icon and text on the back button for one specific page?
– user3607282
May 31 '16 at 10:04
2
I have not tried it. Just look at setBackButtonText() in ionicframework.com/docs/v2/api/components/nav/ViewController/…. Hope it helps
– AishApp
May 31 '16 at 10:08
Hi. Is it possible to change the icon and text on the back button for one specific page?
– user3607282
May 31 '16 at 10:04
Hi. Is it possible to change the icon and text on the back button for one specific page?
– user3607282
May 31 '16 at 10:04
2
2
I have not tried it. Just look at setBackButtonText() in ionicframework.com/docs/v2/api/components/nav/ViewController/…. Hope it helps
– AishApp
May 31 '16 at 10:08
I have not tried it. Just look at setBackButtonText() in ionicframework.com/docs/v2/api/components/nav/ViewController/…. Hope it helps
– AishApp
May 31 '16 at 10:08
add a comment |
The current version of IONIC2 allows you to change the text of the back-button globally.
You can also change the icon like it appears in ios and hide the "Back"
label.
imports: [
IonicModule.forRoot(MyApp,
backButtonText: '',
backButtonIcon: 'ios-arrow-back',
iconMode: 'md'
)
]
Just add this one to your app.module.ts
.
in current version "3.12.1" this is the answer
– Andres Felipe
Sep 12 '17 at 16:44
add a comment |
The current version of IONIC2 allows you to change the text of the back-button globally.
You can also change the icon like it appears in ios and hide the "Back"
label.
imports: [
IonicModule.forRoot(MyApp,
backButtonText: '',
backButtonIcon: 'ios-arrow-back',
iconMode: 'md'
)
]
Just add this one to your app.module.ts
.
in current version "3.12.1" this is the answer
– Andres Felipe
Sep 12 '17 at 16:44
add a comment |
The current version of IONIC2 allows you to change the text of the back-button globally.
You can also change the icon like it appears in ios and hide the "Back"
label.
imports: [
IonicModule.forRoot(MyApp,
backButtonText: '',
backButtonIcon: 'ios-arrow-back',
iconMode: 'md'
)
]
Just add this one to your app.module.ts
.
The current version of IONIC2 allows you to change the text of the back-button globally.
You can also change the icon like it appears in ios and hide the "Back"
label.
imports: [
IonicModule.forRoot(MyApp,
backButtonText: '',
backButtonIcon: 'ios-arrow-back',
iconMode: 'md'
)
]
Just add this one to your app.module.ts
.
edited Jul 5 '17 at 16:10
acdcjunior
81k21189187
81k21189187
answered Apr 11 '17 at 13:10
René PreislerRené Preisler
25132
25132
in current version "3.12.1" this is the answer
– Andres Felipe
Sep 12 '17 at 16:44
add a comment |
in current version "3.12.1" this is the answer
– Andres Felipe
Sep 12 '17 at 16:44
in current version "3.12.1" this is the answer
– Andres Felipe
Sep 12 '17 at 16:44
in current version "3.12.1" this is the answer
– Andres Felipe
Sep 12 '17 at 16:44
add a comment |
I've just spent a while working out how to do this via the ViewController in Ionic 2.
Inside the typescript file for your page you must import the ViewController
import ViewController from 'ionic-angular';
Then in your constructor function include the ViewController.
constructor(public viewCtrl: ViewController)
Then finally you can call the function to change the text.
ionViewDidLoad()
this.viewCtrl.setBackButtonText('Cancel');
I basically cobbled this together from how I'd been doing Alerts and Nav Controller stuff so I may be wrong. It's working for me though and has the benefit of allowing me to change the text on a per page basis.
add a comment |
I've just spent a while working out how to do this via the ViewController in Ionic 2.
Inside the typescript file for your page you must import the ViewController
import ViewController from 'ionic-angular';
Then in your constructor function include the ViewController.
constructor(public viewCtrl: ViewController)
Then finally you can call the function to change the text.
ionViewDidLoad()
this.viewCtrl.setBackButtonText('Cancel');
I basically cobbled this together from how I'd been doing Alerts and Nav Controller stuff so I may be wrong. It's working for me though and has the benefit of allowing me to change the text on a per page basis.
add a comment |
I've just spent a while working out how to do this via the ViewController in Ionic 2.
Inside the typescript file for your page you must import the ViewController
import ViewController from 'ionic-angular';
Then in your constructor function include the ViewController.
constructor(public viewCtrl: ViewController)
Then finally you can call the function to change the text.
ionViewDidLoad()
this.viewCtrl.setBackButtonText('Cancel');
I basically cobbled this together from how I'd been doing Alerts and Nav Controller stuff so I may be wrong. It's working for me though and has the benefit of allowing me to change the text on a per page basis.
I've just spent a while working out how to do this via the ViewController in Ionic 2.
Inside the typescript file for your page you must import the ViewController
import ViewController from 'ionic-angular';
Then in your constructor function include the ViewController.
constructor(public viewCtrl: ViewController)
Then finally you can call the function to change the text.
ionViewDidLoad()
this.viewCtrl.setBackButtonText('Cancel');
I basically cobbled this together from how I'd been doing Alerts and Nav Controller stuff so I may be wrong. It's working for me though and has the benefit of allowing me to change the text on a per page basis.
answered Feb 2 '17 at 22:49
Adam HughesAdam Hughes
1,5721227
1,5721227
add a comment |
add a comment |
I didn't find any documentation for this either. But I have found the file that sets the text and the class of the button, so you can edit it there (it will change the button text/class in every page).
Change the attribute backButtonText
in node_modules/ionic-framework/config/modes.js
add a comment |
I didn't find any documentation for this either. But I have found the file that sets the text and the class of the button, so you can edit it there (it will change the button text/class in every page).
Change the attribute backButtonText
in node_modules/ionic-framework/config/modes.js
add a comment |
I didn't find any documentation for this either. But I have found the file that sets the text and the class of the button, so you can edit it there (it will change the button text/class in every page).
Change the attribute backButtonText
in node_modules/ionic-framework/config/modes.js
I didn't find any documentation for this either. But I have found the file that sets the text and the class of the button, so you can edit it there (it will change the button text/class in every page).
Change the attribute backButtonText
in node_modules/ionic-framework/config/modes.js
answered Mar 7 '16 at 19:56
akz92akz92
1,65921930
1,65921930
add a comment |
add a comment |
If you are using ionic 4 you can set back button text like this
<ion-back-button [text]="'<your text>'"></ion-back-button>
add a comment |
If you are using ionic 4 you can set back button text like this
<ion-back-button [text]="'<your text>'"></ion-back-button>
add a comment |
If you are using ionic 4 you can set back button text like this
<ion-back-button [text]="'<your text>'"></ion-back-button>
If you are using ionic 4 you can set back button text like this
<ion-back-button [text]="'<your text>'"></ion-back-button>
answered Nov 14 '18 at 17:02
KabirKabir
8071126
8071126
add a comment |
add a comment |
Here official documentation https://ionicframework.com/docs/v3/api/config/Config/
there is a good example of usage in the ionic 3 starter app
In costructor of app.component.ts is used "set" method used of Config object from ionic-angular:
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
Is usefull when you want to use internationalization or if you want change configs dynamically:
this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
add a comment |
Here official documentation https://ionicframework.com/docs/v3/api/config/Config/
there is a good example of usage in the ionic 3 starter app
In costructor of app.component.ts is used "set" method used of Config object from ionic-angular:
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
Is usefull when you want to use internationalization or if you want change configs dynamically:
this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
add a comment |
Here official documentation https://ionicframework.com/docs/v3/api/config/Config/
there is a good example of usage in the ionic 3 starter app
In costructor of app.component.ts is used "set" method used of Config object from ionic-angular:
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
Is usefull when you want to use internationalization or if you want change configs dynamically:
this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
Here official documentation https://ionicframework.com/docs/v3/api/config/Config/
there is a good example of usage in the ionic 3 starter app
In costructor of app.component.ts is used "set" method used of Config object from ionic-angular:
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
Is usefull when you want to use internationalization or if you want change configs dynamically:
this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
edited Jan 25 at 15:51
answered Jan 25 at 15:45
raffaeleambrosioraffaeleambrosio
1236
1236
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35850685%2fhow-to-change-the-label-from-back-button-in-ionic-2%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown