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