CODEWITHSUNDEEP
angularionic-framework
CoderTn
CoderTn

Reputation: 997

ionic retreive passed data from page to page

i am navigating from page to another page in ionic 5 and passing data as navigation parameters , it's already navigating correctly but i can't retreive the passed data in the details page . HomePage.ts :

this.navCtrl.navigateRoot(['products', {item: 'data value'}]);

Products.ts (details page): 

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-products',
  templateUrl: './products.page.html',
  styleUrls: ['./products.page.scss'],
})
export class ProductsPage implements OnInit {
  private activatedRoute: ActivatedRoute

  constructor() {
    this.sub = this.route.params.subscribe(params => {
      this.id = params.id; 
  });
   }


  ngOnInit() {
 /*   this.activatedRoute.params.subscribe((params) => {
      console.log('Params: ', params);
    });
*/
  }

}

i got this error : "Property 'sub' does not exist on type 'ProductsPage'.",

Upvotes: 1

Views: 2889

Answers (2)

CheeSeE
CheeSeE

Reputation: 19

Same question had been answered at:

https://forum.ionicframework.com/t/how-to-pass-data-from-1-page-to-another-using-navigation-in-ionic-4/151060/2

Upvotes: 0

Khanh Le Tran
Khanh Le Tran

Reputation: 900

There are 2 options:

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

Upvotes: 3

Related Questions