bug: ion-back-button is not showing up in Ionic 5 unless defaultHref attribute is specified

[chilupa]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

<ion-back-button> is not showing up in the toolbar when provided [text] and [icon] but works only when defaultHref attribute is specified.

Expected behavior:

It should work both ways. I should be able to choose the textand icon of my wish

Steps to reproduce:

Create any page and place this as your header

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button
          [text]="buttonText"
          [icon]="buttonIcon">
      </ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Related code:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [text]="Back" [icon]="arrow-back"> </ion-back-button>
    </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>
</ion-header>

Below is my code repo where I could replicate the issue. Run this locally and go to /about page. You won't be able to see the back button thought it is specified. https://github.com/chilupa/ionic5-infinite-scroll-postion-top/blob/master/src/app/about/about.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [text]="Back" [icon]="arrow-back"> </ion-back-button>
    </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>
</ion-header>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.2
   @capacitor/core : 2.0.2

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.2 (/Users/pavanchilukuri/.nvm/versions/node/v12.18.2/bin/node)
   npm    : 6.14.5
   OS     : macOS Catalina```

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. There are a couple issues here:

1. ion-back-button does not show up unless there are pages in the navigation stack. What this means is that if you navigate directly to /about, the back button will not show up because there are no pages to "navigate back to". Using defaultHref works because that will set the default path to go back to when there are no pages in the stack, forcing the back button to appear.

2. Because you are using bindings, Angular expects Back and arrow-back to be variables in your TypeScript code. It looks like you meant for these values to be strings, in which case you should just do text="Back" and icon="arrow-back".

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.