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

Moving from Ionic 3 to Ionic 4 with navigating has changed up quite a bit, but the changes aren't too bad. The Ionic Docs recommend to switch to Angular Routing instead of the traditional Ionic pop and push. There are a couple of way to route your pages, but I think the easiest to understand is using the navigateForward() and navigateBack() functions in the .ts file.

Ex.

navigateForward(){
    this.navCtrl.navigateForward('/route of the page you want to navigate to');
  }

<ion-button large block (click)="navigateForward()">
      Navigate Forward
</ion-button>

Of course navigating forward and backward has to do with the structure of how your app is build from the stack.

The app-routing.module.ts file will automatically create the routes for your generated pages, but you can manually change the routes there as well as set a root page.

A good reference to routing tutorials here. Also shows different ways to navigate using routes throughout your app.

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