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

Ionic Framework ionic-v3
1

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

2 Likes
2

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

20 Likes
3

Thanks for your valuable response. please let me tryā€¦

4

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

1 Like
5

Iā€™m really happy to help you. Have a nice day :grinning:

1 Like
6

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.

7

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

  }
2 Likes
8

Condacore Thanksā€¦ its working fineā€¦:+1:

9

this is helpful ā€¦Thanks.

1 Like
10

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
11

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
12

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

13

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.

14

Just use json.stringify(data)
Thank u

15

image

still Iā€™m getting this

16

Please could you share your code hereā€¦

17

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
18

i have to pass tthe array will this help me ?

19

I only pass data through the Angular Extras State: https://ionicacademy.com/pass-data-angular-router-ionic-4/ (Option 3)

20

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

1 Like