How to use Ionic's RouterDirection with a click event?

Question

When routing from one page to another, the firstly used technique is the routerLink + routerDirection. In the first piece of code (#1), we go from one page to next page with a direction of forward. When we want to go back to the original page, in the second piece of code (#2), we have to pass data in the state of the router. So there we use a click event to handle the routing.

Problem occurs with the second navigation with the click event (#2). We lose the ability to trigger the routerDirection to use the back animation. The page is rampaging forward (see the example below #3).

Is there a way to trigger the back animation with routerDirection + click event?

Angular NavigationExtras don't provide this as I looked into the documention here: https://angular.io/api/router/NavigationExtras

#1 | Route to page with routerLink

<ion-button fill="clear" routerLink="/chat-settings" routerDirection="forward">
  <ion-icon color="light" name="add-circle"></ion-icon>
</ion-button>

#2 | Route back with click event

<ion-button (click)="goToChat()" routerDirection="back"> <!-- routerDirection does nothing -->
  <ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>

goToChat() {
  this.router.navigateByUrl('/chat/' + this.chatID, {
    state: {
      // ...
    },
  });
}

#3 | Live device

Juraj Juraj · Accepted Answer · 2020-05-20T15:42:08

You can achieve this using NavController's navigateBack() function which uses router.navigateByUrl() under the hood as you can see here. Your goToChat() function would then look something like this:

goToChat() {
  this.navController.navigateBack('/chat/' + this.chatID, {
    state: {
      // ...
    },
  });
}

How to use Ionic's RouterDirection with a click event?

1 Answers