Ionic-framework: Improvements for ion-back-button (disabled and text only for ios)

[rafalschmidt97]

Feature Request

Ionic version:


[x] 4.0.0

Describe the Feature Request

1. I would love to see disabled attribute for back button (sometimes we need to block actions for example when we wait for response - would be cool to block it). For now i just use hidden attribute but it looks weird when it disappears unexpectedly.

2. I need to translate "Back" text for ios. On android defaultly there is just an arrow (without text). But when i use attribute text it shows also text on android which I don't need.

Describe Preferred Solution

1. Change colour of icon and text and disable action.
2. Maybe a new attribute like iosText to change "Back" for ios. I don't need it on android.

[iosText]="'Back' | translate"

Have a nice day 😀

[christianguevara]

Meanwhile to hide the text in android you can use in variables.scss

  .button-text.sc-ion-back-button-md {
    display: none;
  }

[rafalschmidt97]

@christianguevara that's a clever workaround 😂

[biesbjerg]

1) A disabled attribute actually already exists for the back button component, but it doesn't look like it's exposed to Angular.

You can use it like this:

<ion-back-button [disabled]="true"></ion-back-button>

2) Regarding the back button text, you could do this in AppComponent's ' ngOnInit (which is also more DRY than defining the button text everywhere) :

if (this.platform.is('ios')) {
    this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
        this.config.set('backButtonText', this.translateService.instant('Back'));
    });
}

[rafalschmidt97]

@biesbjerg - thanks a lot! 🚀

[NiklasMerz]

this.config.set is deprecated and that's why there should still be an option to translate the back button text globally in a simple way.

[carstenbaumhoegger]

@christianguevara thank's for your solution!
I'm using Ionic 5 and it doesn't work anymore because they moved more components over to shadow dom. Does anyone have an updated solution for the problem that the text should only be shown when running on iOS?

[rafalschmidt97]

@christianguevara thank's for your solution!
I'm using Ionic 5 and it doesn't work anymore because they moved more components over to shadow dom. Does anyone have an updated solution for the problem that the text should only be shown when running on iOS?

In my case the problem doesn't exist as long as I'm using .config (provided by @biesbjerg) to set up the text instead of text="xyz". @NiklasMerz said it's deprecated but it works.