tonyawad88
5/27/2016 - 7:32 PM

Components - Modals

Components - Modals

//1. Add the import to the top of the page import {Modal} from 'ionic-angular'
//2. Make sure in the constructor of the class you have "public nav: NavController" and
//   in the import section you have "import {NavController}" from 'ionic-angular'
//3. Include "import {Modal_Class_Name} from '../modal_location/modal_location';"
//4. Call function below and pass in object
openModal(num) {
      var obj = {id:num};
      let modal = Modal.create(ModalPlaces, obj);
      this.nav.present(modal);
}
import {Page, NavController,NavParams,ViewController,Platform} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/modal-places/modal-places.html',
})
export class ModalPlaces {
  constructor(params: NavParams, public viewCtrl: ViewController, public platform: Platform) {
    console.log('Parms: ' + JSON.stringify(params));
  }

  dismiss(){
    this.viewCtrl.dismiss();
  }
}
<ion-toolbar favorite>
  <ion-title>
    Description
  </ion-title>
  <ion-buttons start>
    <button (click)="dismiss()">
      <span showWhen="ios">Cancel</span>
      <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
    </button>
  </ion-buttons>
</ion-toolbar>

<ion-content padding>
  <h2>Test</h2>
</ion-content>