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

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

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?

Solution

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