Passing specific parameter from previous page to the next page

Hi. I need help in passing the specific parameter from the home page to the event details page.
i.e : on the event details title would be the event selected from the home page. I am using ionic version 3

I have tried to pass the parameter using this.navctrl.push {eventdetailspage , ‘{{event.eventname}}’) but its not working. PLEASE HELP. Thank you

For the push function you need a data object, you are only passing a string. Do it like this:

this.navctrl.push {eventdetailspage , { myName: event.eventname });

// Inside Details Page Constructor

hi! thank you for replying. I already did that on the home page but its not working


You don’t need the “” also the {{}}, because in your typescript class you can reference directly to the properties.

import { Component } from ‘@angular/core’;
import { ModalController, NavController, NavParams, LoadingController } from ‘ionic-angular’;
import { Http, Headers } from ‘@angular/http’;

import * as moment from ‘moment’; // import momentjs

import {LoggedInCallback, CognitoUtil, Callback} from “…/…/providers/cognito.service”;
import {EventsService} from “…/…/providers/events.service”;
import {UserLoginService} from “…/…/providers/userLogin.service”;

//operator Api
import ‘rxjs/add/operator/map’;

import { PopupEventPage } from “…/…/pages/popup-event/popup-event”;
import { LoginComponent } from “…/…/pages/auth/login.component”;

//class to keep access id token
export class GetAccess {
public idToken: string;

selector: ‘page-home’,
templateUrl: ‘home.html’,

export class HomePage implements LoggedInCallback{

public date;
public events;
private todaydate = moment().format(“YYYY-MM-DD”);
public getAccess: GetAccess = new GetAccess();
param1: string= ‘’;

private http: Http,
public navCtrl: NavController,
public navParams: NavParams,
public loadingCtrl: LoadingController,
public nav: NavController,
public eventService: EventsService,
public cognitoUtil: CognitoUtil,
public userService: UserLoginService,
public modalCtrl: ModalController


console.log('date: ', this.todaydate);
let headers = new Headers(
      'Content-Type': 'application/json', 
      'Access-Control-Allow-Origin': '*',  
      'Authorization': this.getAccess.idToken
this.http.get('*****api********'+ this.todaydate, {headers:headers})
.map(res => res.json())
    data => { = data;
    // Jika ada error
    err => console.log("error is "+err),
    // Jika request complete
    () => console.log('read events Complete '+


isLoggedInCallback(message: string, isLoggedIn: boolean) {
console.log("The user is logged in: " + isLoggedIn);
if (isLoggedIn) {
this.cognitoUtil.getIdToken(new IdTokenCallback(this));
console.log('token from dashboard here: ', this.getAccess.idToken);

//push popout join event
addData() {

  {param1  :event.eventname});



export class IdTokenCallback implements Callback {
constructor(public home: HomePage) {


callback() {


callbackWithParam(result) {
this.home.getAccess.idToken = result;



its not working. the event.eventname have error

Do a console.log on on the receiving end (poppage) and show us the output

(Not sure how you provide for navparams in the receivjng page so the code is pseudo)

I can’t see any event parameter passed. So of course event.eventname is undefined, if event is also undefined.

But the solution would be:

  {paramName  : "parameter as string"});

and at PopupEventPage in the constructor

constructor(public navParams: NavParams, ...other things in constructor...) {
    let params  = this.navParams.get('paramName');
1 Like