Modal wont open Ionic 2

Ionic Framework ionic-v3
1

Hey guys! Ive been battling with my modal, trying to get it after being clicked and it just wont do so.

Context:

I have it on a tabs page, dont see how this would bother the process but ill assume all information can help.

Heres a snippet:

//the modal.js
    import {Component} from '@angular/core';
    import {NavController, ViewController, Modal} from 'ionic-angular';
    @Component({
      templateUrl: 'build/pages/messages/messages.html'
    })
    export class Messages {
      constructor(ViewCtrl){
        this.ViewCtrl = ViewCtrl;
      }
      close(){
        this.viewCtrl.dismiss();
      }
    }

//The component it is coming from:
    export class friendListTab{
      static get parameters(){
        return [[NavController]];
      }
      constructor(nav){
        this.nav=nav;
      }

      openMessages(){
        let modal = Modal.create(Messages);
        this.nav.push(modal);
      }
}

Lastly, the error:

fyoql9k.png319×513

Let me know if you guys need any other information from me, i would love help on this issue it has stopped me from moving forward. In advance thank you for your help!

2

Hi!

Where is your ModalCmp?
Could you post the Modal Html?

3

Yes i can!

<ion-nav *navbar>
  <button clear (click)='close()'>close</button>
  <ion-title>Users Name</ion-title>
</ion-nav>

<ion-content>
  Text will go here
</ion-content>
4

Thanks.

Your screenshot, shows an error about ModalCmp. What is this? Where is used?

5

i have no clue, i went through the api and there is a model-cmp section but it doesnt say much. Im not sure if i have to add it somewhere or if it needs to be removed.

7

Well, there are a few mistakes in your code. First of all when you’re showing a modal (or any other overlay like Alert, ActionSheet, etc.) you should use NavController.present() and not NavController.push(). And then in the Messages component the DI for ViewController is not properly configured, so closing the modal won’t work too.

Here’s the updated code (with inline notes for the fixes):

//the modal.js
    import {Component} from '@angular/core';
    import {NavController, ViewController, Modal} from 'ionic-angular';

    @Component({
      templateUrl: 'build/pages/messages/messages.html'
    })
    export class Messages {
      // NOTE: Setup Angular's DI properly, otherwise it won't work.
      static get parameters(){
        return [[ViewController]];
      }

      constructor(ViewCtrl){
        this.ViewCtrl = ViewCtrl;
      }

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

//The component it is coming from:
    export class friendListTab{
      static get parameters(){
        return [[NavController]];
      }

      constructor(nav){
        this.nav=nav;
      }

      openMessages(){
        let modal = Modal.create(Messages);
        // NOTE: Use present() instead of push() for overlays.
        this.nav.present(modal);
      }
    }

Note that I haven’t tested it, so there might be other mistakes or errors.

8

Oh man i love when people put time into a response shows they really care and for that i thank you. But i dont think im out of the woods just yet. After updating my code a new little error came along, and ive been troubleshooting for the past hour or two and to no avail the red text still mocks me.

Note. ive added everything you have changed and the modal still wont open when clicked. I think its the navController thats not allowing it to be presented onto the stack, but in all honestly im still just a noobie so idk.

If you could point me in the right direction i would be more than glad to try and figure it out.

Thanks,

9

It seems that the modal is not constructed properly. This error indicates that the method setNav() is not found on the parameter passed to NavController.present() (i.e. the modal variable in your case) and it should be present if the creation of the modal was successful (because it’s defined in ViewController which the Modal class extends and therefore should also have this method). Check for previous (different) errors that could hint where the problem could be.

10

I might be pulling this card to early but i think it may be a bug in the NavController. Ive combed through everything from creation of the tabs page, to the button itself comparing it with the api, and docs. I haven’t found anything that could lead to why the Nav isn’t opening it. I’m not sure exactly what the entering-view is but i think its just an animation that brings in the modal. Any advice or help would be greatly appreciated.

Here is an image of the present function (where the error is coming from) so you guys wouldnt have to look it up:

11

Problem solved! Played around with it a bit. Sadly i went on a changing spree and im not sure exactly what the error was, but i think it may have been i didnt have

this.messages=Messages

added onto the tabs.js file. Thank you for youre help @iignatov.

12

Ok, great, I’m glad that you managed to solve the problem.