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

I want to pass value one page to another page
home.html

  <ion-item *ngFor="let item of data" (click)="onClickDetails(item)">
    <ion-thumbnail slot="start" >
      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
    </ion-thumbnail>
    <p>{{item.userFullName}}</p>
    <ion-button color="primary" slot="end">View</ion-button>
  </ion-item>

home.ts

 onClickDetails(item){
    this.router.navigate(['details',{item:item}])
    }

details.ts

 ngOnInit() {
    this.getValue= this.router.snapshot.paramMap.get("item")
    console.log(JSON.parse(this.getValue))
  }

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

1 Like

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 => {
     this.id = params['id']; 
});

Beste Regards
Marius

9 Likes

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” (https://ionicframework.com/docs/storage/).
I’m using this to pass parameters between tabs:

// Send Parameter
async openDetails(parameter: any) {
    await this.storage.set('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
Marius

2 Likes

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

image

still I’m getting this

Please could you share your code here…