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

Question

In Ionic 3 you could use the second argument of the navController to pass data to the next page and retrieve it with the navParams service.

This was a really convenient feature. Is there an equivalent api for routing in Ionic 4?

You can always JSON.stringify the object/array to the routerParams, which in my opinion is less convenient.

In Ionic 4 you can pass data with the modalController using ComponentProps and @Input() making it more suitable of a quick push/pop implementation.

EDIT

My intention with this question is to find out if there are any native APIs from Angular 6+ or Ionic 4+. I am well aware of ways to implement a custom service or resolver to accomplish this.

The goal is to use ionic's and angular's api to its fullest, since in larger projects each custom code requires documentation and increases complexity.

Answer 1

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 page
let navigationExtras: NavigationExtras = { state: { foo: this.foo } };
this.router.navigate(['destination-path'], navigationExtras);
// destination page
constructor(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

Answer 2

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!

Answer 3

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));
              });
              }

Answer 4

Actually there is many way to pass data between pages. I tried over Route and navCtrl but, it didn't works for me. I am sharing a way to pass data using SERVICE.

1. Create a service on your ionic project or you can follow the same steps for Angular project also (only the command will change):

  $ ionic generate provider <any name>

2. Put this codes on your service TS file.

  import { Injectable } from "@angular/core";
  import { map } from "rxjs/operators";
  import { BehaviorSubject } from "rxjs";  

  @Injectable({ providedIn: "root" })

  export class <your_class_name_here> {
    constructor() {}

    private dataSource = new BehaviorSubject("default message");
    serviceData = this.dataSource.asObservable();

    changeData(data: any) {
      this.dataSource.next(data);
    }
  }

3. Import the service on both pages, from where you take the data and where to want to get the data. like this.

  import { UserService } from "./../services/user.service";

  constructor(
    private userServ: UserService,
  ) {}

4. Set your data like this :

  this.userServ.changeData(responceData.data);

5. get your data like this :

  sentData: any;

  ngOnInit() {
    this.userServ.serviceData
      .subscribe(data => (this.sentData = data));
    console.log("sent data from login page : ", this.sentData);
  }

this works for me.

Answer 5

I have solved this

You can simply pass the object data with route using JSON.stringify.

this.router.navigate(['namepage',JSON.stringify(data)]);

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

items: any;

this.items = JSON.parse(this.activatedRoute.snapshot.paramMap.get('id'));

to visualize the data we attach the name of the field where it is saved

this.idxxx = this.items.namefield;

you must first define the parameter in app.routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'namepage/:id', loadChildren: './pages/page/page.module#pagePageModule' },
];

I hope it helps you, it really is the easiest way to do it

Answer 6

I've been working with Ionic 4 since the first beta and I haven't found what you are looking for. I believe the Ionic team wants to leave the task of component interaction to the component framework (Angular, React, Vue...).

If you want to reduce complexity, you could use Angular services, redux or ngrx for state management of the application. This way you could navigate to a view, update the global state through an action, then go back to the previous view and show the updated state.