1

I want to pass some data between the pages in ionic version 5. Is there any possible way to do this? I am using ionic version '5.4.16' and angular version '10.0.8'.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
HeshK
  • 21
  • 1
  • 1
  • 4
  • Possible Duplicate: https://stackoverflow.com/questions/52187282/ionic-4-how-to-pass-data-between-pages-using-navctrl-or-router-service – OJ7 Aug 03 '21 at 18:32

3 Answers3

7

Page 1

constructor(public nav: NavController){}

pushToNextScreenWithParams(pageUrl: any, params: any) {
    this.nav.navigateForward(pageUrl, { state: params });
  }

Page 2

constructor(public router: Router){
if (router.getCurrentNavigation().extras.state) {
      const pageName = this.router.getCurrentNavigation().extras.state;
console.log(pageName) 
    }
}
Ravi Ashara
  • 1,177
  • 7
  • 16
2

so after looking at a variety of sources, if your only passing data forward and you don't care about passing data back, here's an example:

// from
export class SomePage implements OnInit {

  constructor (private nav: NavController) {}

  private showDetail (_event, item) {
    this.nav.navigateForward(`url/${item.uid}`, { state: { item } })
  }
}

// to
export class SomeOtherPage implements OnInit {
  item: any

  constructor (private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(_p => {
      const navParams = this.router.getCurrentNavigation().extras.state
      if (navParams) this.item = navParams.item
    })
  }
}

Hope that's clear.

Don
  • 71
  • 1
  • 4
1

The easiest way is pass it to a service in the first page, and pick it from same service on the next page.

First Create a service and then declare a public variable inside your service like this

public result: any;

then go down and declare a function to always change this variable anytime

changeData(result){

    this.result = result;
  }

Second go to the page where you want to pass the data and pass it like below, using the name of the service and the public variable.

this.util.changeData(data);

note: data here is the data you want to pass

Thirdly you can pick the data from anywhere on your app, example i am accessing the data from my view like below

{{this.util.result}}
Emmanuel Iyen-Mediatrees
  • 159
  • 8