CODEWITHSUNDEEP
javascriptangularionic4
Robert
Robert

Reputation: 333

Routing to a tab from a button inside a modal in Ionic 4

I have a button inside a Ionic 4 Modal that I wish to when clicked have it open a page which is a tab.

I can verify that the tab exist because I have navigated to it directly.

Here is my code for the button itself: 

<ion-button expand="block" class="signup" margin (click)="signupPage()">Don't have account? Sign Up</ion-button>

As you can see the click function loads upon clicking the button which activates this function here: 

signupPage() {
    this.modalController.dismiss();
    this.router.navigate([`/tabs/(signup:signup)`]);
  }

The modal closes however I am not routed to the tab and this is the error I am currently getting. 

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs'
Error: Cannot match any routes. URL Segment: 'tabs'

Thank you for the help in advance!

Upvotes: 0

Views: 1014

Answers (2)

H S W
H S W

Reputation: 7119

It can be also done in following way:

On your button tap/click event:

signupPage() {
  this.modalController.dismiss(dismissed: true,
    route: `/tabs/(signup:signup)`);
}

And where you are presenting a modal, right before return await modal.present();

 //According to your requirements

 //you can use this

 modal.onDidDismiss().then((result) => {
  console.log(result.data);
  if (result.data.route) {
    this.router.navigate([result.data.route]);
  }


 //or you can use this one
 modal.onDidDismiss().then((result) => {
  console.log(result.data);
  if (result.data.route) {
    this.router.navigate([result.data.route], {
      relativeTo: this.route,
    });
  }
});

Upvotes: 0

westdabestdb
westdabestdb

Reputation: 4648

Change your markup and function as follows. You were supposed to change the tab route but you were using Angular router in order to change the route.

[attr.href] will add href attribute to ion-button element.

<ion-button expand="block" class="signup" margin [attr.href]="'/tabs/(signup:signup)'"  (click)="signupPage()">Don't have account? Sign Up</ion-button>

signupPage() {
    this.modalController.dismiss();
    // you don't need to route from here anymore.
}

Upvotes: 1

Related Questions