Ionic 4: How to set navigation direction (backward/forward) using routerLink?

angular-ui-router angular7 direction ionic4 routerlink
Natanael picture Natanael · Jan 4, 2019 · Viewed 24.7k times · Source

Ionic 4 now uses Angular router. Altough it still has its own NavControler, which helps to simulate push / pop navigation style though the navigateBackward and navigateForward methods.

So that ion-back-button is shown it is necessary to use navigateForward and navigateBackward, I think.

In my application I prefer to use routerLinks to navigate (so that the user can open the page in another tab) instead of navController.

But with routerLinks the ion-back-button does not appears. There must be an way to make routerLinks act like push/pop navigation.

How could I simulate an event like navigateForward and navigateBackward using routerLinks?

Answer

welshcathy picture welshcathy · Feb 20, 2019

You can use the attribute routerDirection on your view element. For example

  <ion-button [routerLink]="['/details']" routerDirection="forward" >
    Go forward
  </ion-button>

For a full detailed description of how to manage navigation in Ionic 4 including routerLink you should read Josh's very detailed blog post

Related questions

How to reload the current state?

I'm using Angular UI Router and would like to reload the current state and refresh all data / re-run the controllers for the current state and it's parent. I have 3 state levels: directory.organisations.details directory.organisations contains a table with …

Read More
How to pass parameters using ui-sref in ui-router to controller

I need to pass and recieve two parameters to the state I want to transit to using ui-sref of ui-router. Something like using the link below for transitioning the state to home with foo and bar parameters: <a ui-sref="…

Read More
What is the difference between angular-route and angular-ui-router?

I'm planning to use AngularJS in my big applications. So I'm in the process to find out the right modules to use. What is the difference between ngRoute (angular-route.js) and ui-router (angular-ui-router.js) modules? In many articles when ngRoute …

Read More