Ionic 4 - how to pass data between pages using navCtrl or Router service

There is multiple ways to pass a parameters from a page to another in Ionic v4 / Angular 7.2+:

1. Using Extras State (new since Angular 7.2) - Recommanded

Simple and clean

// original pagelet navigationExtras: NavigationExtras = { state: { foo: this.foo } };this.router.navigate(['destination-path'], navigationExtras);// destination pageconstructor(private route: ActivatedRoute, private router: Router) {    this.route.queryParams.subscribe(params => {      if (this.router.getCurrentNavigation().extras.state) {        this.foo= this.router.getCurrentNavigation().extras.state.foo;      }    });  }

2. Use a service and a resolver

Does not fecth the data but a bit heavy.

Store the data into a service and pass a resolver using the router

3. Using object's id (not recommanded)

If your object is stored, you can pass the id in the url and fetch it again.

It will slows the application, implies that the object is stored somewhere and may increase networks issues (if not stored localy)

4. Using query params (not recommanded)

By stringyfing your object: See @Tahseen Quraishi's answer

Only few informations can be passed and the URL is hideous

Some examples here

I have solved this by wrapping the Ionic NavController in a provider which has functions to set a value to a variable and a function to get it again. Similar to this.navParams.get('myItem').

Take a look at the following;

import { Injectable } from '@angular/core';import { NavController } from '@ionic/angular';@Injectable()export class Nav {    data: any;    constructor(public navCtrl: NavController) {        // ...    }    push(url: string, data: any = '') {        this.data = data;        this.navCtrl.navigateForward('/' + url);    }    pop(url) {        this.navCtrl.navigateBack('/' + url);    }    get(key: string) {        return this.data[key];    }}

Hope this helps!

You can simply pass the object with route using queryParams.

import { Router } from '@angular/router';      object = {            name: 'subham',            age: '34',            address: '34 street, Delhi, India'            }      constructor(public router : Router) {}            onGoToNextPage(){            this.router.navigate(['/pageName'],{            queryParams: this.object,            });          }

To receive this object you need to use ActivatedRoute which is to be imported from '@angular/router'

import { ActivatedRoute } from '@angular/router'; constructor(public activatedRoute : ActivatedRoute,) {                 this.activatedRoute.queryParams.subscribe((res)=>{                  console.log(res);              });              }

In case you have little complex structure of object.

let suppose you have below object to send.

object = {                name: 'subham',                age: '34',                address: '34 street, Delhi, India'                favourite_movie: ['dhoom','race 2','krishh'],                detail : {                  height: '6ft',                  weight: '70kg'                 }                }

To send the above object you need to first stringify the object with the help of JSON.stringfy().

   import { Router } from '@angular/router';          object = {                    name: 'subham',                    age: '34',                    address: '34 street, Delhi, India'                    favourite_movie: ['dhoom','race 2','krishh'],                    detail : {                      height: '6ft',                      weight: '70kg',                     }                    }          constructor(public router : Router) {}                onGoToNextPage(){                this.router.navigate(['/pageName'],{                queryParams: {                   value : JSON.stringify(this.object)                  },                });              }

To recieve this object you need to parse this object using JSON.parse() method.

import { ActivatedRoute } from '@angular/router'; constructor(public activatedRoute : ActivatedRoute,) {                 this.activatedRoute.queryParams.subscribe((res)=>{                  console.log(JSON.parse(res.value));              });              }