How do I create a modal view in ionic 2?
The documentation shows you how to open the modal, but it is not clear which page you should pass 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 is not clear where the "ContactUs" object comes from, there is no import for it. This example is linked from here: https://ionicframework.com/docs/api/components/modal/ModalController/
source to share
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 "Contacts" component, which is defined on the "Home" page
@Component(...)
class ContactUs {
constructor(public viewCtrl: ViewController) {
}
dismiss() {
this.viewCtrl.dismiss();
}
}
source to share
The easiest way is to create a modal content page:
ionic g ModalPage
Then you need to open modal-content.module.ts, if the command creates this file you need to change
imports: [
IonicModule.forChild(ModalPage),
],
TO:
imports: [
IonicModule.forRoot(ModalPage),
],
Then you need 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 need to import in the declarations and entryComponents of the application 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 on the page that you want to execute the modal, you must add a function to the element you want to use to launch it.
<div full large class="button-el btn-goOut" (tap)="openModal()">
On the page you want to use the modal you have to import:
import { ModalPage } from '../modal-page/modal-page'
Important: this element does not have to be in the constructor to call the modal code, which you only need to do like this:
openModal(){
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
source to share
You can find a working example here in the docs repository .
It is not clear where the "ContactUs" object comes from, there is no import for it.
ContactUs
is another page, you can use any page from your application 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();
}
}
The example below is ModalContentPage
used to create a modal. Note that it is recommended to include only one component per file, so ideally you should create a page to be used as a modal file in another file.
source to share