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

Question

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?

score 26 · Accepted Answer · answered Feb 20 '19 at 13:05

26

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

answered Feb 20 '19 at 13:05

welshcathy

361
3
9

Kindly also tell the value of routerDirection for backward animation – Syed Kashan Ali Feb 25 '19 at 08:52
`` – welshcathy Mar 06 '19 at 10:03
For more details again Josh is here for you! https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/ – welshcathy Mar 06 '19 at 10:04
13

It's `routerDirection="back"` not "backward" FYI. – Grant Sep 25 '19 at 00:37
3

How to do this directly in typescript? – Otziii Jan 05 '20 at 09:51

score 2 · Answer 2 · answered Feb 04 '19 at 16:55

2

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.

answered Feb 04 '19 at 16:55

Stephen Romero

2,812
4
25
48

2

Ionic recommends not using NavController anymore. How can this be done only using router? – Otziii Jan 05 '20 at 09:49
@Otziii it looks like Ionic decided to completely use angular routing now. their documentation here:https://ionicframework.com/docs/angular/navigation can help or if not look for Angular routing for help. – Stephen Romero Jan 06 '20 at 14:37
@Otziii Did you find any solution to do this with router ? StephenRomero Bro I couldn't find any routerdirection in the link you uploaded – Nischaya Sharma Jun 07 '21 at 04:18
@NischayaSharma Sorry, I don't remember. – Otziii Jun 07 '21 at 08:04
@NischayaSharma You have to use 100% Angular routing now. This should still be feasible with Angular though. – Stephen Romero Jun 07 '21 at 12:13
@StephenRomero I tried with angular routing, but I still can't use any feature like router direction as using Nav Ctrl is not recommended. So all my pages are going forward only by default. – Nischaya Sharma Jun 10 '21 at 05:48
Does anyone know how this would be done via this.router.navigate()? – Darrow Hartman Nov 29 '21 at 07:24

score 2 · Answer 3 · edited Aug 04 '22 at 08:33

2

use routerDirection="back" this will change the page transition like going back with your routerLink

#transition #ionic

edited Aug 04 '22 at 08:33

Tyler2P

2,324
26
22
31

answered Jul 31 '22 at 18:58

Muddassir Hussain

51
3

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

3 Answers3