Undefined value from navParams.get


#1

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();
  }
}