how do I create a modal view in ionic 2?

Question

The documentation shows you how to open the modal, but isn't clear on what kind of page you're supposed to be passing to the open() method

example from docs:

import { Component } from '@angular/core';
import { ModalController, ViewController } from 'ionic-angular';

constructor(public modalCtrl: ModalController) {

 }

 presentContactModal() {
   let contactModal = this.modalCtrl.create(ContactUs);
   contactModal.present();
 }

It isn't clear how where the 'ContactUs' object comes from, there is no import for it. This example linked to here: https://ionicframework.com/docs/api/components/modal/ModalController/

Answer 1

import { Component } from '@angular/core';
import { ModalController, ViewController } from 'ionic-angular';

@Component(...)
class HomePage {

    constructor(public modalCtrl: ModalController) {    }
    presentContactModal() {
         let contactModal = this.modalCtrl.create(ContactUs);
         contactModal.present();
    }    
}

///////////////below is the Contact us component which is define with in Homepage

@Component(...)
class ContactUs {

   constructor(public viewCtrl: ViewController) {

   }

   dismiss() {
     this.viewCtrl.dismiss();
   }
}

Answer 2

The easiest way is to generate a modal content page:

ionic g ModalPage

Then you have to open modal-content.module.ts if the command creates this file, you have to change

imports: [
    IonicModule.forChild(ModalPage),
  ],

TO :

imports: [
    IonicModule.forRoot(ModalPage),
  ],

Then you have to add some html for the modal structure:

<ion-header>
  <ion-toolbar>
    <ion-title>
      GO OUT
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span ion-text color="primary" showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <p> This is a modal test!!!! </p>
</ion-content>

Then you have to import in the declarations and entryComponents of the app module.

import { ModalPage } from '../pages/modal-page/modal-page';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Main,
    ModalPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ModalPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Device,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

Then in the page you want to execute the modal you have to add a function to the element you want to use to fire it.

<div full large class="button-el btn-goOut" (tap)="openModal()">

In the page you want to use the modal you have to import :

 import { ModalPage } from '../modal-page/modal-page'

Important: this element should not be in the constructor, to call the modal you only have to do like this:

openModal(){
      let modal = this.modalCtrl.create(ModalPage);
      modal.present();
  }