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/

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

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

Solution 3

You can find a working example here in the docs repository.

It isn't clear how where the 'ContactUs' object comes from, there is no import for it.

ContactUs is just another page, you can use any page from your app to create a modal with it.

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

@Component({
  templateUrl: 'template.html'
})
export class BasicPage {
  constructor(public modalCtrl: ModalController) { }

  openModal(characterNum) {

    let modal = this.modalCtrl.create(ModalContentPage, characterNum);
    modal.present();
  }
}

@Component({
  template: `
<ion-header>
  <ion-toolbar>
    <ion-title>
      Description
    </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>
  <ion-list>
      <ion-item>
        <ion-avatar item-left>
          <img src="{{character.image}}">
        </ion-avatar>
        <h2>{{character.name}}</h2>
        <p>{{character.quote}}</p>
      </ion-item>
      <ion-item *ngFor="let item of character['items']">
        {{item.title}}
        <ion-note item-right>
          {{item.note}}
        </ion-note>
      </ion-item>
  </ion-list>
</ion-content>
`
})
export class ModalContentPage {
  character;

  constructor(
    public platform: Platform,
    public params: NavParams,
    public viewCtrl: ViewController
  ) {
    var characters = [
      {
        name: 'Gollum',
        quote: 'Sneaky little hobbitses!',
        image: 'assets/img/avatar-gollum.jpg',
        items: [
          { title: 'Race', note: 'Hobbit' },
          { title: 'Culture', note: 'River Folk' },
          { title: 'Alter Ego', note: 'Smeagol' }
        ]
      },
      {
        name: 'Frodo',
        quote: 'Go back, Sam! I\'m going to Mordor alone!',
        image: 'assets/img/avatar-frodo.jpg',
        items: [
          { title: 'Race', note: 'Hobbit' },
          { title: 'Culture', note: 'Shire Folk' },
          { title: 'Weapon', note: 'Sting' }
        ]
      },
      {
        name: 'Samwise Gamgee',
        quote: 'What we need is a few good taters.',
        image: 'assets/img/avatar-samwise.jpg',
        items: [
          { title: 'Race', note: 'Hobbit' },
          { title: 'Culture', note: 'Shire Folk' },
          { title: 'Nickname', note: 'Sam' }
        ]
      }
    ];
    this.character = characters[this.params.get('charNum')];
  }

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

In the example below, ModalContentPage is used to create the modal. Please notice that it's recommended to include just one component per file, so ideally you'd create the page to use as a modal in a different file.