Simplify Modal coding?

Ionic Framework ionic-v3
#1

Can someone please help me.

I just cannot work out how to get Modals working.

I’ve seen this tutorial: https://alexdisler.com/2016/03/27/modals-in-ionic-framework-2/

It makes out like it’s really easy but the tutorial is obviously out of date.

Can someone explain how to do this? I’ve been trying for months now.

#2

src/modals/about/about.html

<ion-header>
    <ion-navbar color="primary">
        <ion-buttons left>
            <button ion-button icon-only (click)="dismiss()">
                <ion-icon name="close"></ion-icon>
            </button>
        </ion-buttons>

        <ion-title>About</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <h1>Hello, Mine Turtle!</h1>
</ion-content>

src/modals/about/about.ts

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

@Component({
    selector: 'modal-about',
    templateUrl: 'about.html'
})
export class AboutModal {
    constructor(
        public viewController: ViewController
    ) {
    }

    public dismiss() {
        this.viewController.dismiss();
    }
}

src/pages/home/home.html

<ion-header>
    <ion-navbar color="primary">
        <ion-title>About</ion-title>

        <ion-buttons right>
            <button ion-button (click)="about()">
                About
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

src/pages/home/home.ts

import { AboutModal } from '../../modals/about/about';

...

public about() {
    this.modalController
    .create()
    .present();
}

This isn’t updated for Ionic 3, but I believe you’d mostly just decorate the about modal component with @IonicPage().

1 Like
#3

Thanks, looks like it might make sense,

I still don’t understand this bit though.

#4

Which version of Ionic are you on right now?

#5

The latest, 3. I’m using the most up to date docs.

I’m sure this is really easy, I just don’t get it.

#6

Okay, because the tutorial you’re referring to is way outdated. Always look at the latest documentation when trying to build something :slight_smile: 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);
   });
2 Likes
#7

I’ve read that doc.

I need to know exactly where the code goes.

For example - the presentProfileModal() function. Where do I put this? In the constructor? Outside?

This is my problem - I just need the absolute bare-bones example with all the code in the right places so I can work it out. Even you user id bit seems to be more complex than I need right now.

#8

Well, if you refer to the doc you can see that it goes inside the page class, outside of the constructor.

#9

Why do you don’t read the docs carefully? There is also a link to the API docs with a example code on GitHub.

This is not a documentation problem. As a developer you won’t missundertand this part of the docs.

In my opinion you should first learn how to code. If you don’t know how to call a method you should do some basic hello world stuff first…

#10

Yeah, I can code, I’m just not great with Angular. I’ve written stuff in Ionic 1 and Angularjs (Angular 1).

#11

I think it would be advisable to do some reading about Angular2 in particular. I gave a very easy and simple deduction of the code. If you open the docs next to it, you would be able to figure it out. Sometimes it isn’t enough to only read documentation, but to actually try something.

To elaborate on your question, presentProfileModal() is a callable function which should exist within your Class, but outside of your constructor. Skip the bit about passing the data. It’s absolutely barebones without those two items.

View 1:

  • import the modalcontroller and declare it inside your constructor (as per the example I gave you).
  • Create a function called presentProfileModal() somewhere inside the class, but outside of your constructor. This function is going to be invoked by a user action or whatever you want to call it from. Pass the page you want to pop up inside the modal with it and this is the function you’re getting:
 presentProfileModal() {
   let profileModal = this.modalCtrl.create(Profile);
   profileModal.present();
 }

View 2:
This is the page/view you’re opening with the profileModal.present(); .
import the ViewController and add it to your constructor (as per example I gave).

If you want to dismiss this page from over here, call this.viewCtrl.dismiss(). Make this available by creating a function inside the class, something like this:

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

Now, inside your pagetemplate make a button, give it a handler which calls dismiss() and you’re good to go.

#12

Ok, this is using the tabs starter template.

This is what I have:

contact.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ModalController, NavParams } from 'ionic-angular';
import { ModalPage } from 'modal';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
  }
  
  presentProfileModal() {
   let profileModal = this.modalCtrl.create(ModalPage);
   profileModal.present();
 }

}

contact.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>Follow us on Twitter</ion-list-header>
    <ion-item>
   <button ion-button block (click)="presentProfileModal()">Open Modal</button>
    </ion-item>
  </ion-list>
</ion-content>

modal.ts

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

@Component({
  selector: 'modal',
  templateUrl: 'modal.html'
})
export class ModalPage {

	constructor(public viewCtrl: ViewController) {}

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

modal.html

<ion-header>
    <ion-navbar color="primary">
        <ion-buttons left>
            <button ion-button icon-only (click)="dismiss()">
                <ion-icon name="close"></ion-icon>
            </button>
        </ion-buttons>

        <ion-title>About</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <h1>Hello, Mine Turtle!</h1>
</ion-content>

I’ve done nothing else, at all, to the starter template. I’ve just installed it.

The error I get is this:

Typescript Error
Supplied parameters do not match any signature of call target.
src/pages/contact/contact.ts
presentProfileModal() {
 let profileModal = this.modalCtrl.create();
 profileModal.present();
Ionic Framework: 3.0.1
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 6.9.4
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

What am I doing wrong?

Hopefully you can see why this is so frustrating. I’ve literally done exactly what is in the docs. The console doesn’t give any error.

Update: The code above now works. I’d missed out the ModalPage import in the contacts.ts and hadn’t passed ModalPage into the creat() function.

#13

You’ve literally didn’t do what’s in the documentation. It’s all about reading. How do you figure that this is going to work?

this.modalCtrl.create();

It’s over here in the component documentation

it’s over here in the API docs:

You aren’t passing anything into the create method, so nothing get’s created. You should pass in a Component, just as the docs describe and the error states! The error tells you: you’re calling a function but didn’t pass in the right parameters. So it’s also in the error.

So, if it’s still not clear: you should import Modal into your Contact.ts and pass the component into the create method as a parameter.

3 Likes
#14

I’ve done it.

At last.

It seems obvious now but when it doesn’t work it’s just so maddening. I couldn’t have done it without your help.

Thanks!

I’ll update my code to show what I changed.