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
this.navParams.get('myName');
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
//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;
}
}
its not working. the event.eventname have error
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)
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');
}