How to pass data to another page

#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.

4 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