Ion-back-button does nothing

It’s been a few years since I’ve touched and it’s much different. While I appreciate that they now try to use the angular router, there doesn’t seem to be any documentation on how it works now.

I want ion-back-button to work on iOS, so users can navigate back. There is no documentation to explain how this is supposed to work, it simply says

It is smart enough to know what to render based on the mode and when to show based on the navigation stack

Which doesn’t seem too helpful.

But, I made my settings page (/settings) navigate to a sub profile page (/settings/profile) using this.router.navigate(['/settings/profile']);

This takes me to the profile page, and the back button even appears, it just doesn’t actually do anything. Turns out it is not “smart enough to know what to render”, because it does nothing.

nav

I looked at the routing section in the angular guide and looked at the docs for router-output, I see nothing that tells me what is going on here. I also tried using defaultHref just to see and it makes no difference, the button simply doesn’t work.

I can force it to go back with this.location.back();, but I lose the animation when going back, and sort of seems to defeat the purpose of having a back button if I have to hard code the functionality each time.

1 Like

So I went into the ionic source code and found out that the back buttons onClick method is just checking if there is a routerOutlet and if it can go back, and decided to log those things out. All looks good, canGoBack is true, so the back button should then execute this.routerOutlet.pop() (https://github.com/ionic-team/ionic-framework/blob/f58424f62596b9eb82bebb8e07c211e1725c025a/angular/src/directives/navigation/ion-back-button.ts).

But, for reasons unknown I guess it isn’t. So, I just added a method to my profile component that calls the pop directly:

  goBack() {
    this.routerOutlet.pop();
  }

And just tossed it on the back button:

<ion-back-button (click)="goBack()"></ion-back-button>

Now, I still think it’s dumb that I have to do this, since the back button should be doing it automatically, but at least I get the back animation now.

Would still like to know how to avoid this tho, if anyone has any idea.

2 Likes

can you provide small repo to see actual issue

Something similar happened to me today. The reason was that I forgot to declare the component which has the back button.

@rlouie Please check this link I hope its works for you.
click here to open link