CODEWITHSUNDEEP
angularroutesionic5
HeshK
HeshK

Reputation: 21

Pass the data between pages in ionic 5

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

Upvotes: 1

Views: 16055

Answers (3)

Emmanuel Iyen
Emmanuel Iyen

Reputation: 437

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

Upvotes: 2

Don
Don

Reputation: 91

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.

Upvotes: 3

Ravi Ashara
Ravi Ashara

Reputation: 1196

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

Upvotes: 7

Related Questions