How to pass data from 1 page to another using navigation in Ionic 4?

I want to pass value one page to another page

  <ion-item *ngFor="let item of data" (click)="onClickDetails(item)">
    <ion-thumbnail slot="start" >
      <img src="">
    <ion-button color="primary" slot="end">View</ion-button>




 ngOnInit() {
    this.getValue= this.router.snapshot.paramMap.get("item")

there showing only one value but i want whole value of data variable
how can i do that
please help me out
Thanks in advance


Option 1: NavController:

// Send Parameter
import { NavController } from '@ionic/angular';
import { NavigationExtras } from '@angular/router';
constructor(public navCtrl: NavController) { }
let navigationExtras: NavigationExtras = {
    queryParams: {
        currency: JSON.stringify(currency),
        refresh: refresh
this.navCtrl.navigateForward(['page-slug'], true, navigationExtras);
// Receive Parameter
import { ActivatedRoute } from "@angular/router";
constructor(private route: ActivatedRoute) {}
this.route.queryParams.subscribe(params => {
    this.refresh = params["refresh"];
    this.currency = JSON.parse(params["currency"]);

Option 2: Router:

// Send Parameter
import { Router } from '@angular/router';
constructor(private router: Router) {}

goToProductDetails(id) {
  this.router.navigate(['/product-details', id]);
// Receive Parameter
import { ActivatedRoute } from '@angular/router';
id: any;
constructor(private route: ActivatedRoute) {}
this.sub = this.route.params.subscribe(params => { = params['id']; 

Beste Regards


Thanks for your valuable response. please let me try…

Really you are rock. its work perfect .
Thanks a lot

1 Like

I’m really happy to help you. Have a nice day :grinning:

1 Like

But doing so makes my URL look real bad when passing an entire object, Don’t we have something like reading from navParam(i know it’s no longer supported in ionic 4) but similar solution will help me.

Sorry for the delayed replay during Christmas,

you could also use “Storage” (
I’m using this to pass parameters between tabs:

// Send Parameter
async openDetails(parameter: any) {
    await'myParam', parameter);
    await this.navCtrl.navigateForward(['/currency-details/tabs-currency/currency-overview']);
// Receive Parameter
  constructor(private storage: Storage) {

    storage.get('myParam').then((parameter) => {
      console.log('Received Parameter: ' + parameter);

1 Like

Condacore Thanks… its working fine…:+1:

this is helpful …Thanks.

1 Like

How does this code work?
The navigateForward method doesn’t support the arguments above.
The arguments of the navigateForward-method looks at me as following:

 navigateForward(url: string | UrlTree | any[], options?: NavigationOptions)

Do I understand something wrong?
How can I use the NavigationExtras.state property with the navigateForward method ?

1 Like

Seems that they did remove the second parameter. You only need the first and the third parameter :slight_smile:

this.navCtrl.navigateForward(['page-slug'], navigationExtras);

Best Regards


Hello Thank you for your help. I tried with your options. it works. But, The parameter is showing on browser. May I know how to wrap and unpack it. Many Thanks

Hello, I have a problem on getting navigated data. I passed array to next page using NavigationExtras and at the next page if i try to get the values using queryParams, I’m getting type of array instead of values i.e. [object Object]. Help me to get the values.

Just use json.stringify(data)
Thank u


still I’m getting this

Please could you share your code here…

I implemented the code of the initial post. In the home.ts you must replace onClickDetails(item) with
onClickDetails(item: dataType) where dataType is the data type of item. Otherwise, you get undefined error.

1 Like

i have to pass tthe array will this help me ?

I only pass data through the Angular Extras State: (Option 3)

can I know where does the this.sub come from?