Passing specific parameter from previous page to the next page


#1

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


#2

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
this.navParams.get('myName');

#3

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

push


#4

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


#5

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

//providers
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’;

//pages
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;
}

@Component({
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= ‘’;

constructor(
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('home');
console.log('date: ', this.todaydate);
this.userService.isAuthenticated(this);
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())
.subscribe(
    data => {
      this.events = data;
    },
    // Jika ada error
    err => console.log("error is "+err),
    // Jika request complete
    () => console.log('read events Complete '+ this.events)
);

}

isLoggedInCallback(message: string, isLoggedIn: boolean) {
console.log("The user is logged in: " + isLoggedIn);
if (isLoggedIn) {
this.eventService.sendLoggedInEvent();
//this.nav.setRoot(ControlPanelComponent);
//this.nav.setRoot(TabsPage);
this.cognitoUtil.getIdToken(new IdTokenCallback(this));
console.log('token from dashboard here: ', this.getAccess.idToken);
}else{
this.eventService.sendLoggedInEvent();
//this.nav.setRoot(ControlPanelComponent);
this.nav.setRoot(LoginComponent);
}
}

//push popout join event
addData() {

this.navCtrl.push(PopupEventPage, 
  {param1  :event.eventname});

}

}

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

}

callback() {

}

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

}

}


#6

its not working. the event.eventname have error


#7

Do a console.log on navParams.data 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)


#8

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:

this.navCtrl.push(PopupEventPage, 
  {paramName  : "parameter as string"});

and at PopupEventPage in the constructor

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