How to pass data to another page

Ionic Framework ionic-v3
1

i have the list of the videos from the youtube and i want to pass the id and tiitle of the video which i click to the next page. how to do it.

1 Like
2
3

page1.html

<ion-card *ngFor="let item of items" (click)="test($event, item)">
<!--CONTENT HERE-->
</ion-card>

page1.ts

public test(event ,item ){
this.navCtrl.push(page2,{
item:item
});
}

page2.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page2',
  templateUrl: 'page2.html',
})
export class Page2 {
value:any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.value = navParams.get('item');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad EmiCalPage');

  }
 
}

page2.html

<div *ngIf="value">
{{value.yourObjectname}}
</div>

or

<div>
{{value}}
</div>

I hope your problem will be fixed
Good Luck
Thank you.

7 Likes
4

Thanks, Man, it helped me…

5

if its help to you and your problem will be fixed then please mark as solution

6

Why you use event in (click)=“test($event, item)”
I use item.id but always give me undefined
Could you please explain this point ??

7 
export class Page2 {

value2:any = {
item_id=""
}
value:any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.value = navParams.get('item_id');
  }

How do i pass value data to value 2’s item_id?
Any help is highly appreciated

1 Like
8

Sorry, i did not get your question.please can you explain in little bit more details?

9

You can try like this

  value2:any = {
    'item_id':""
    }

sendvalue(){
  this.value2.item_id =this.value
  console.log(this.value2)
}

hope this code will help you to achieve your goal
God luck.

1 Like
10

my current situation is like this

public merchantId: any;
  merData: any = {
    "mtid": "", //Value of merchantID should come here which I get from NavParams
  };

  constructor(public navCtrl: NavController, public authService: AuthService, public navParam: NavParams) {
    this.merchantId = this.navParam.get('merchant_id');
    console.log(this.merchantId);
    this.menuCategory();
  }

  menuCategory() {
    this.merData.mtid = this.merchantId;
    this.authService.getMenuCategory(this.merData, 'getCategory')
      .then((result) => {
        this.category = result;
        console.log(this.category);
      }, (err) => {
        console.log(err);
      });
  }```

the request i send to serve should go like **request["mtid": "merchantId"]** 
but 
its actually going like **request["9":""]**

if merchantId = 9
11

this function call on

ionDidViewLoad(){
this.menuCategory();
}
1 Like
12

Thank you so much it worked.
Really appreciated for the quickest response :slight_smile:

1 Like
13

Great to hear. if above code has solved your problem please mark as a solve.
Thanks

14

thanks…it works…
but can i pass data from page1 to page2 and from page2 to page3?
i hope u can help me!! :slight_smile:

15

Of course you could. Pass the data from page 2 to page 3 and then get it in Page 3 with navParams.

16

For the context of your question, passing values in GET parameter is correct. However, GET has it’s own limits in terms of data size when passing data in URLs.

In such situations, you can just store them in ionic storage and get that data in your another page by fetching from the storage.

1 Like
17

thank you… its work!! :slight_smile:

1 Like
18

yes bro its a true but in my NavController don’t have a push function so what i can do ?