CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic4
Antoine Thiry
Antoine Thiry

Reputation: 2442

Ionic 4 opening modal from within another modal : modal.create() is not a function

I'm trying to open a modal dialog from within another modal dialog, by searching through the web I can see that people did it before without problems, but I can't seem to get it working.

When I try to create my second modal component from the first modal component it says:

TypeError: this.modal.create is not a function

Here's my code (trimmed with the relevant parts).

Component.module.ts

@NgModule({
  declarations: [
    QuizResultComponent,
    AnswerRecapComponent
  ],
  imports: [CommonModule, FormsModule, IonicModule, FontAwesomeModule],
  exports: [
    QuizResultComponent,
    AnswerRecapComponent
  ],
  entryComponents: [
    QuizResultComponent,
    AnswerRecapComponent
  ]
})
export class ComponentsModule {}

This is how I open the first modal: Exam.page.ts

... 
export class ExamPage implements OnInit {

    ...

    constructor(
        private router: Router,
        private modal: ModalController
    ) {}

    ...

    async openModal(){
        // Creating the result modal
        const modal = await this.modal.create({
        component: QuizResultComponent,
        componentProps: {
            type: 'exam'
        }
        });

        // Registering back to menu event after dismiss
        modal.onDidDismiss().then(_ => this.router.navigate(['/menu']));

        // Showing modal
        return await modal.present();
    }

    ...

}

And this is for the second modal from quiz-result.component.ts where the exception is throw.

... 
export class QuizResultComponent implements OnInit {

    ...

    constructor(
    private modal: ModalController,
    private navParams: NavParams
  ) {}

    ...

    async openAnswerRecap(q) {
        const modal = await this.modal.create({ // This line throws the exception.
            component: AnswerRecapComponent,
            componentProps: {
                question: q.question
            }
        });

        return await modal.present();
    }

    ...

}

I don't really see any problem with this code, is there something that prevents me from opening a modal from another modal component ?

Upvotes: 8

Views: 9604

Answers (4)

Mansour Alnasser
Mansour Alnasser

Reputation: 5030

I have the same case and solved it like this:

You will need to import the AnswerRecapModule on the QuizResultModule.

@NgModule({
  declarations: [...],
  imports: [
    ....

    AnswerRecapModule

  ],
})
export class QuizResultModule { }

If you don't have a Module for both of them create it.

Moreover: @Luiz Carlos answer will be needed also, create two ModalController on QuizResultComponent

export class QuizResultComponent implements OnInit {

    ...

    constructor(
    private QuizModal: ModalController,
    private AnswerModal: ModalController,

    private navParams: NavParams
  ) {}

where QuizModal for dismissing the current modal, and AnswerModal to create AnswerRecapComponent

Upvotes: 0

chandu boddu
chandu boddu

Reputation: 11

I have faced the same issue , there is a workaround for that . Let us take u have three to four models windows you have to call on one after other like a chain . U must be having ok or next button for each window , on the click method call two events like Onclick=create ():close Methods

Upvotes: 0

Dylan w
Dylan w

Reputation: 2896

The thing to remember is a modal in Ionic v4 is just a component, not a page.

The way I got it to work was by importing both modals (declarations, exports and entryComponents) in a shared module and importing that modal within the parent page's module that displays them. Similar to what OP has done.

I also deleted the modules generated by default by the cli (if you did ionic g page sampleModal).

Upvotes: 1

Luiz Carlos
Luiz Carlos

Reputation: 121

In my case, i created on the second modal controller different name on constructor, like:

First Modal: constructor(private modal: ModalController) Second Modal: constructor(private _modal: ModalController)

And add in your module entryPoint for 2 modals.

Upvotes: 12

Related Questions