Okay, because the tutorial you’re referring to is way outdated. Always look at the latest documentation when trying to build something
The docs are pretty straightforward for modal creation and usage. You can find it over here:
You start of by importing the ModalController in the page where you want to create the modal.
import { ModalController, NavParams } from 'ionic-angular';
Then in the constructor, make the modalController available like this:
constructor(public modalCtrl: ModalController) {}
Now you’re good to go. Let’s add a function that creates a modal for you and presents it on top of your view:
presentProfileModal() {
let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
profileModal.present();
}
The {} part is actually optional. This is the way to pass some data into your modal through navparams. Profile is just the page you want to load into the modal. In this case, it’s a page named Profile. You should always import the component you want to load in the modal inside of the page where you’re creating the modal.
Now your modal is presented with the present() method. To dismiss the modal again, add the ViewController to your imports on the ModalPage (in this case, Profile).
import { ViewController } from 'ionic-angular';
set this intro the constructor inside your modalpage:
constructor(public viewCtrl: ViewController) {}
Now you can make a button somewhere in your modal with a click handler that knows how to dismiss the modal. Bind the button to a function named dismiss() or something and add this in your modalpage:
dismiss() {
this.viewCtrl.dismiss();
}
If you want to also get data back from the modal, pass it into the viewCtrl.dismiss(myDataInThisPart) and listen for the onDidDismiss in the page where you created your modal like this:
profileModal.onDidDismiss(data => {
console.log(data);
});