Passing Data between a Page and Component

Ionic Framework ionic-v3
1

I have a page and on that page and a component as below. The data on the page below is populated after navigating from another page using

(click)="navigateToPage('PageToGoTo', restaurant)"

<ion-content padding>
 <ion-card>
     <ion-item>
         <h2>{‌{restaurant.name}}</h2>
         <p>{‌{restaurant.location}}</p>
     </ion-item>
  </ion-card>
</ion-content>
<ion-comment-component></ion-comment-component>


In the <ion-comment-component>  component code I am trying to access restaurant.name but it fails with error message uncaught promise **name** cannot be found. Can I access the restaurant.name value in this component?
2

hi there, first on ts file ensure you have the following:

this.navController.push(PageToGoTo, {
	param1: 'restaurant', param2: '....''
});

on the restaurant single ts file;

import {NavController, NavParams} from 'ionic-angular';

constructor(private navController: NavController, private navParams: NavParams) {
this.restaurant = navParams.get('param1'); 
this.parameter2 = navParams.get('param2');}
3

I have a simple solution : using the local storage

first ts file

 window.localStorage.setItem("PageToGoToData",JSON.stringify(DataYouWantInOtherComponent));

Receiving Data Component


let ReceivedData = window.localStorage.getItem("PageToGoToData"); 
let data= JSON.parse(ReceivedData );
1 Like
4

The problem is accessing this.parameter2 in the component. The PageToGoTo has a component where I want to access parameter2.

5

No, this is going to be slower and less predictable than using a service provider or NavParams.

Not directly. If you could, the entire point of components would be lost. They need to be independent of their containers. What you can do is declare an @Input property for either the name or the entire restaurant object on your comment component (which incidentally must be renamed to not start with an ion- prefix, because that is reserved for Ionic framework components), and then pass it in like any other bound property:

<app-comment-component [restaurant]="restaurant">
2 Likes
6

Have you include the component in ts file?

----- Mensagem Original -----

7

That actually solved a whole host of problems. Understanding how the @Input and @Output decorators help a lot. Thank you.