IONIC 4 - Angular Routing Parameters

Question

I am busy with an upgrade of an old IONIC app to IONIC 4 and things are going well, however I am not able to find anything that details how to pass data and use pages in the routing of Angular.

Here is a code snippet of the problem:

OLD CODE

this.navCtrl.setRoot(VendorBookingDashboardProgressPage, { booking: temp });

In the above code, you will see that booking: temp is passed as a parameter for additional data and VendorBookingDashboardProgressPage is the reference page to navigate to.

NEW CODE

this.navCtrl.navigateRoot('vendor/vendor-booking-dashboard-progress'); -- This is where the booking: temp parameter is missing and must be included as well as hard-coded URL where page reference should rather be included but a string parameter is required.

I can live with hard-coding the URL, but the parameters are key and need to know how this can be achieved please.

Praise Hart · Accepted Answer · 2020-01-08 10:20:37Z

11

Try doing it using navigation extras like this:

import { NavigationExtras } from '@angular/router';
import { NavController } from '@ionic/angular';

constructor( public navCtrl: NavController) {
}

//this should be within a function
const navigationExtras: NavigationExtras = {
      queryParams: {
        special: JSON.stringify(temp)
      }
};
this.navCtrl.navigateRoot(['vendor/vendor-booking-dashboard-progress'], 
navigationExtras);

Then to retrieve it from the page routed to, try this within the page's ts file:

import { ActivatedRoute, Router } from '@angular/router';

data: any;

constructor(
  public activatedRoute: ActivatedRoute,
  private router: Router) {
}

ngOnInit(){
  this.activatedRoute.queryParams.subscribe(params => {
  if (params && params.special) {
    //store the temp in data
    this.data = JSON.parse(params.special);
  }
}
}

answered Jan 8, 2020 at 10:20

Praise Hart

17211 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Praise Hart Over a year ago

@Gustavo Glad i could help 👍🏾

Praveen Patel · Accepted Answer · 2020-01-08 09:34:40Z

7

You can try below method to pass data between pages

Using Query Params

   let navigationExtras: NavigationExtras = {
      queryParams: {
        special: JSON.stringify(this.user)
      }
    };
    this.router.navigate(['details'], navigationExtras);

Service and Resolve Function (legit)

  setData(id, data) {
    this.data[id] = data;
  }

  getData(id) {
    return this.data[id];
  }

Using Extras State (new since Angular 7.2)

    let navigationExtras: NavigationExtras = {
      state: {
        user: this.user
      }
    };
    this.router.navigate(['details'], navigationExtras);

Ref : https://ionicacademy.com/pass-data-angular-router-ionic-4/

edited Jan 8, 2020 at 9:34

answered Jan 8, 2020 at 9:31

Praveen Patel

3477 silver badges26 bronze badges

2 Comments

Alexander Trakhimenok Over a year ago

Using Query parameters is a must if you want to support page reloading with keeping context.

Klemens Zleptnig Over a year ago

But probably you shouldn't pass a "stringified" object as a query parameter, if you can avoid it.

Collectives™ on Stack Overflow

IONIC 4 - Angular Routing Parameters

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related