Data transfer between pages in Ionic 2

Question

I am very new to Ionic and came across a question that I have with my code below. I have a page called restaurant.html that lists restaurants, and when each of these elements is clicked, the data is transferred (the data is pulled from the services file) to another page that should contain full information. However, this is not like the details for each restaurant. Can someone tell me where I am going wrong?

Here are the pages.

restaurant.html

<ion-header> <ion-navbar color="restaurant-color"> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Restaurants</ion-title> </ion-navbar> </ion-header> <ion-content padding class="restaurants attractions common-bg"> <div class="card round" margin-bottom *ngFor="let restaurant of restaurants" (click)="viewRestaurant(restaurant.id)"> <div class="card-header" [ngStyle]="{'background-image': 'url(' + restaurant.thumb + ')'}"></div> <div class="padding-xs"> <h5>{{ restaurant.name }}</h5> <div class="rating"> <ion-icon name="md-star" color="restaurant-color" *ngFor="let star of range(restaurant.rating)"></ion-icon> <ion-icon name="md-star" color="gray" *ngFor="let star of range(5 - restaurant.rating)"></ion-icon> <span color="gray">{{ restaurant.reviews.length }} reviews</span> </div> <span color="gray">Recommended for:</span> <div> <div class="pull-left"> <span color="restaurant-color">{{ restaurant.scores[0].name }},</span> <span color="restaurant-color">{{ restaurant.scores[1].name }}</span> </div> <div class="pull-right"> {{ restaurant.location.distance }} km </div> <div class="clear"></div> </div> </div> </div> </ion-content> 

and for restaurants.ts

 import {Component} from "@angular/core"; import {NavController} from "ionic-angular"; import {RestaurantService} from "../../services/restaurant-service"; import {RestaurantDetailPage} from "../restaurant-detail/restaurant-detail"; @Component({ selector: 'page-restaurants', templateUrl: 'restaurants.html' }) export class RestaurantsPage { // list of restaurants public restaurants; constructor(public nav: NavController, public restaurantService: RestaurantService) { this.restaurants = restaurantService.getAll(); } // view restaurant detail viewRestaurant(id) { this.nav.push(RestaurantDetailPage, {id: id}) } // make array with range is n range(n) { return new Array(Math.round(n)); } } 

Answer 1

This is because you only pass the restaurant identifier as your parameter, and not all the details of the restaurant.

 <div class="card round" margin-bottom *ngFor="let restaurant of restaurants" (click)="viewRestaurant(restaurant)"> 

Modify your HTML to pass all object data. Also send all the data as a parameter to another page when clicked

  viewRestaurant(restaurant) { this.nav.push(RestaurantDetailPage, {id: restaurant}) } 

Hope you are looking for this only

Answer 2

 import {NavController} from 'ionic-angular'; constructor(private navController: NavController) { this.navController.push(SecondPage, { param1: 'param1', param2: 'param2' }); } 

Second page:

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

Answer 3

Try (single) quotes around your param key.

Try it at restaurant.ts

 viewRestaurant(id) { this.nav.push(RestaurantDetailPage, {'id': id}) } 

And in the restaurant-details typescript:

 import { NavController, NavParams} from 'ionic-angular'; export class .... { id: any; constructor(public navParams: NavParams){ this.id = this.navParams.get('id'); console.log(this.id);//The id that you passed must show up now. } } 

I have a suspicion that you want a restaurant instead of id here:

 <(click)="viewRestaurant(restaurant)">