When I chose a destination from home.html then push it by method presentAlert in home.ts, the navParams.get(‘destination’) cant get the value and just shown as undefined when I saw it in console.log.
How to get that value?
Thankyou
===CODE===
home.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Bright Train Tracker</h2>
<br>
<!-- PICK TRAIN -->
<ion-list>
<ion-item>
<ion-label>Select Train</ion-label>
<ion-select required #newSelect [(ngModel)]="yourtrain" (change)="onChange(yourtrain)">
<ion-option *ngFor="let trains of trains">
{{trains}}
</ion-option>
</ion-select>
</ion-item>
</ion-list>
<!-- PICK LOCATION -->
<ion-list>
<ion-item>
<ion-label>Select Location</ion-label>
<ion-select required>
<ion-option *ngFor="let location of locations">
{{location}}
</ion-option>
</ion-select>
</ion-item>
</ion-list>
<!-- PICK DESTINATION -->
<ion-list>
<ion-item>
<ion-label>Select Location</ion-label>
<ion-select required>
<ion-option *ngFor="let destination of destinations">
{{destination}}
</ion-option>
</ion-select>
</ion-item>
</ion-list>
<button class="buttonGo" button (click)="presentAlert($event, destinations)">GO</button>
</ion-content>
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController} from 'ionic-angular';
import { EtaPage } from '../eta/eta';
import { MapsPage } from '../maps/maps';
//Taking data from database.
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
searchQuery: string = '';
trains: string[];
locations: string[];
stations : Observable<any[]>;
constructor(public alertCtrl: AlertController, public navCtrl: NavController,public afDatabase: AngularFireDatabase) {
this.initializeTrainsAndLocations();
this.stations = afDatabase.list('/').valueChanges();
//this.initializeStations();
}
/* //FOR SEARCHBAR and ion list option*/
initializeTrainsAndLocations() {
//dummy
this.locations = [
'Surabaya',
'Mojokerto',
'Jombang',
'Kertosono',
'Nganjuk',
'Wilangan',
'Tasikmalaya'
];
this.destinations = [
'Surabaya',
'Mojokerto',
'Jombang',
'Kertosono',
'Nganjuk',
'Wilangan',
'Tasikmalaya'
];
this.trains = [
'Argo Willis',
'Parahyangan',
'Turangga'
];
}
presentAlert(event, destination) {
let confirmation = this.alertCtrl.create({
title: 'Confirmation',
subTitle: 'Are you sure with this train and the location?' ,
buttons: [{
text: 'No',
handler: () => {
console.log('No clicked');
}
},
{
text: 'Yes',
handler: () => {
console.log('Agree clicked');
this.navCtrl.push(MapsPage, { destination: destination});
}
}]
});
confirmation.present();
}
}
maps.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
//import { Component} from '@angular/core';
//import { NavController } from 'ionic-angular';
//import { AndroidPermissions } from '@ionic-native/android-permissions';
declare var google;
@Component({
selector: 'page-maps',
templateUrl: 'maps.html'
})
export class MapsPage {
//@ViewChild('map')mapElement:ElementRef;
Destination: any;
MyLocation: any;
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer;
constructor(public navCtrl: NavController,public navParams: NavParams) {
this.Destination = navParams.get('destination'); // THE PROBLEM IS HERE
console.log(this.Destination);
//this.calculateAndDisplayRoute();
}
}