# \[SOLVED\] \[Ionic 4\] Need to know how to work the Modal Controller

**URL:** <https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414>\
**Category:** Ionic Framework\
**Created:** [July 27, 2018, 12:59am UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414 "2018-07-27T00:59:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![razmans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/razmans/32/115790_2.png) [@razmans](https://forum.ionicframework.com/u/razmans)\
**Post date:** [July 27, 2018, 12:59am UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/1 "2018-07-27T00:59:27Z")

</div>

Hello fellow Ionic developers,

The following is the new way of launching a modal, from my understanding, can be done with async/await or just with .then. Taken from [beta.ionicframework.com](http://beta.ionicframework.com) website, this is the modal-example.ts:

```auto
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';
@Component({
  selector: 'modal-example',
  templateUrl: 'modal-example.html',
  styleUrls: ['./modal-example.css']
})
export class ModalExample {
  constructor(public modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }
}

```

Of course in modal-example.html

```auto
<ion-button (click)="presentModal()">Launch Modal</ion-button>

```

Question:  
How to load the page on the modal? When the button is pressed I keep getting error, Component factory was not found.  
I tried loading the page normally (declaring at app.module.ts and modal-example.ts) and via lazy load but was not able to launch a modal. I understand that to launch a Modal Controller in Ionic 3, you can do it with lazy load, any ideas?

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [July 27, 2018, 5:17am UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/2 "2018-07-27T05:17:39Z")

</div>

Have you try to add quote around the modal name?

```
component: 'ModalPage',

```

instead of

```
component: ModalPage,
```

---

<div class="post-metadata">

**Author:** ![MattE](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/matte/32/66712_2.png) [@MattE](https://forum.ionicframework.com/u/MattE)\
**Post date:** [July 27, 2018, 2:20pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/3 "2018-07-27T14:20:33Z")

</div>

I’ve found the solution to this.

Just add the `PageModule` of your page to the imports in `app.module.ts` or `components.module.ts` (your choice)

---

<div class="post-metadata">

**Author:** ![razmans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/razmans/32/115790_2.png) [@razmans](https://forum.ionicframework.com/u/razmans)\
**Post date:** [July 30, 2018, 12:16pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/4 "2018-07-30T12:16:02Z")

</div>

[SOLVED] Yeap, MattE you are correct, import into app.module.ts first the PageModule and then only you can import into Home

So, for future references, here’s my code:

app.module.ts

```auto
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FirstPageModule} from './first/first.module'

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,FirstPageModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

```

home.ts

```auto
import { Component } from '@angular/core';
import { NavController,AlertController,ModalController } from '@ionic/angular';
import {FirstPage} from '../first/first.page';

@Component({
  selector: 'app-page-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor( private modalCtrl:ModalController,private alertCtrl:AlertController) {}

  async moveToFirst()
  {
    const modal = await this.modalCtrl.create({
     component: FirstPage
   });

   return await modal.present();
  }
}

```

This will open my modal. Closing it is a whole other thing, instead of getting ViewController to do it, you need to get ModalController to do it with this.modalCtrl.dismiss. Here’s how I closed the modal from first.page.ts

```auto
import { Component, OnInit } from '@angular/core';
import { NavController,ModalController } from '@ionic/angular';

@Component({
  selector: 'first',
  templateUrl: './first.page.html',
  styleUrls: ['./first.page.scss'],
})
export class FirstPage implements OnInit {

  constructor(private nav:NavController,private modalCtrl:ModalController) { }

  ngOnInit() {

  }

  closeModal()
  {
    this.modalCtrl.dismiss();
  }

```

Hope that helps someone in the future to do modal

---

<div class="post-metadata">

**Author:** ![jsanta](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jsanta/32/66466_2.png) [@jsanta](https://forum.ionicframework.com/u/jsanta)\
**Post date:** [July 30, 2018, 11:19pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/5 "2018-07-30T23:19:34Z")

</div>

I did something slightly different.  
On the page module that requires the modal I added the modal page to the declarations, and both calling page and modal page to the entryComponents array. That works quite well.  
Also tried using a shared module but that didn’t work for me.

Just another approach for doing the same. Best regards.

---

<div class="post-metadata">

**Author:** ![bgies](https://avatars.discourse-cdn.com/v4/letter/b/da6949/32.png) [@bgies](https://forum.ionicframework.com/u/bgies)\
**Post date:** [July 31, 2018, 1:49am UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/6 "2018-07-31T01:49:41Z")

</div>

Well, both of those work, but is it possible to lazy load the modal page… I have a couple of modals that are used in many places (one is a login modal, and the other is a Help Modal), but the user typically won’t use them at all, so I prefer not to load the page inside the modal unless it’s actually used.

That was easy to do with Ionic 3, but I haven’t come up with a way to do it in Ionic 4

---

<div class="post-metadata">

**Author:** ![razmans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/razmans/32/115790_2.png) [@razmans](https://forum.ionicframework.com/u/razmans)\
**Post date:** [July 31, 2018, 1:52am UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/7 "2018-07-31T01:52:30Z")

</div>

I have not figured out how to lazy load too. If someone is able to figure out lazy load, then that would be great

---

<div class="post-metadata">

**Author:** ![Trivedi](https://avatars.discourse-cdn.com/v4/letter/t/3d9bf3/32.png) [@Trivedi](https://forum.ionicframework.com/u/Trivedi)\
**Post date:** [August 13, 2018, 12:07pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/8 "2018-08-13T12:07:13Z")

</div>

Hi razmans,

I am having same issue and tried your solution but still same error, **"ERROR Error: Uncaught (in promise): Error: No component factory found for GetAddressesPage. Did you add it to @NgModule.entryComponents?"**

Here is my code.  
app.module.ts

import {GetAddressesPageModule} from ‘./pages/get-addresses/get-addresses.module’;

imports: [  
BrowserModule,  
HttpClientModule,  
RouterModule,  
FormsModule,  
GetAddressesPageModule,  
ReactiveFormsModule,  
IonicModule.forRoot(),  
AppRoutingModule  
],

In the broadband- availability , I have to open the modal  
import { GetAddressesPage } from ‘…/get-addresses/get-addresses.page’;  
async presentAddressModal() {  
const modal = await this.modalCtrl.create({  
component: ‘GetAddressesPage’,  
componentProps: { postcode: this.postcode.value}  
});

```
return await modal.present();

```

}

Could you please what’s wrong? I am really fedup with this upgrade to ionic 4 beta.

---

<div class="post-metadata">

**Author:** ![Trivedi](https://avatars.discourse-cdn.com/v4/letter/t/3d9bf3/32.png) [@Trivedi](https://forum.ionicframework.com/u/Trivedi)\
**Post date:** [August 13, 2018, 12:09pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/9 "2018-08-13T12:09:11Z")

</div>

Sorry it’s working now. i need to remove quote from the component.

---

<div class="post-metadata">

**Author:** ![Trivedi](https://avatars.discourse-cdn.com/v4/letter/t/3d9bf3/32.png) [@Trivedi](https://forum.ionicframework.com/u/Trivedi)\
**Post date:** [August 13, 2018, 2:31pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/11 "2018-08-13T14:31:34Z")

</div>

Hi razmans,

While closing the popup if i want to pass the data and handle the event, how can i do it?

Earlier version i was doing like this.

presentAddressModal() {  
let addressModal = this.modalCtrl.create(GetAddressesPage, { postcode: this.postcode.value });  
addressModal.onDidDismiss(data =\> {  
if(data.action == ‘Select’)  
{  
this.AddressRefNum = data.AddressRefNum;  
this.DistrictCode = data.DistrictCode;  
this.onSubmit();  
}  
});  
addressModal.present();  
}

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [August 13, 2018, 2:36pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/12 "2018-08-13T14:36:38Z")

</div>

> [@\[Ionic-v4\] Modal Parameters](https://forum.ionicframework.com/t/ionic-v4-modal-parameters/137326/2):
>
> Did you try NavParams in your modal to get the params? [https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/](https://forum.ionicframework.com/t/ionic-4-get-data-in-modal-passed-with-componentprops/) As far I understand it works like following To pass parameters to the modal, use componentProps const modal: HTMLIonModalElement = this.modalController.create({ component: MyModal, componentProps: { something: 'value', other: {couldAlsoBeAnObject: true} } }); To get the values in your modal const something: string = this.navP…

---

<div class="post-metadata">

**Author:** ![Trivedi](https://avatars.discourse-cdn.com/v4/letter/t/3d9bf3/32.png) [@Trivedi](https://forum.ionicframework.com/u/Trivedi)\
**Post date:** [August 13, 2018, 2:52pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/13 "2018-08-13T14:52:25Z")

</div>

Hi reedrichards,

That is for to pass the data to the modal page, i am talking about to handle operations after closing the modal and back to the ordiginal page, there i want to perform few more operations after closing the modal.

like this in modal page,

let data = { ‘action’:‘Select’,‘AddressRefNum’: AddressRefNum, ‘DistrictCode’: DistrictCode};  
this.modalCtrl.dismiss(data);

where i passed these data and i want to handle next operation using these data.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [August 13, 2018, 2:58pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/14 "2018-08-13T14:58:03Z")

</div>

it’s also displayed in the post I linked

---

<div class="post-metadata">

**Author:** ![razmans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/razmans/32/115790_2.png) [@razmans](https://forum.ionicframework.com/u/razmans)\
**Post date:** [August 13, 2018, 4:12pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/15 "2018-08-13T16:12:24Z")

</div>

Yes this is the way to do it

---

<div class="post-metadata">

**Author:** ![sharemeals](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@sharemeals](https://forum.ionicframework.com/u/sharemeals)\
**Post date:** [September 17, 2018, 10:21pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/16 "2018-09-17T22:21:08Z")

</div>

@ razmans thanks! including it in app.module.ts fixed it for me. it wasn’t documented in any of the Ionic docs.

---

<div class="post-metadata">

**Author:** ![luisgls18](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@luisgls18](https://forum.ionicframework.com/u/luisgls18)\
**Post date:** [October 14, 2018, 9:18am UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/17 "2018-10-14T09:18:07Z")

</div>

> [@razmans](#):
>
> @NgModule({ declarations: [AppComponent], entryComponents: , imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,FirstPageModule],

**just change this way and it works perfectly.**

> **FirstPageModule** in declarations and entryComponents **not in imports**

```auto
@NgModule({
  declarations: [AppComponent, FirstPageModule],
  entryComponents: [FirstPageModule],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

```

---

<div class="post-metadata">

**Author:** ![manunoly](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@manunoly](https://forum.ionicframework.com/u/manunoly)\
**Post date:** [November 6, 2018, 6:59pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/19 "2018-11-06T18:59:22Z")

</div>

the @luisgls18 answer work very well and let you use lazyload, you can use entryComponents and declarations in the module declaration page that you want to load the popup.

---

<div class="post-metadata">

**Author:** ![Motero69](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/motero69/32/123290_2.png) [@Motero69](https://forum.ionicframework.com/u/Motero69)\
**Post date:** [November 19, 2018, 5:36pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/20 "2018-11-19T17:36:55Z")

</div>

Hi,  
I have my code like your, but when I do present(), aparantly the modal is load because I can see in console the result of the modal when load  
ngOnInit() {  
console.log(this.value);  
}

but do not show anything.

What Im doing wrong?

help please

---

<div class="post-metadata">

**Author:** ![Motero69](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/motero69/32/123290_2.png) [@Motero69](https://forum.ionicframework.com/u/Motero69)\
**Post date:** [November 19, 2018, 6:15pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/21 "2018-11-19T18:15:07Z")

</div>

if you put that in declaration and EntryComponents like you said

@NgModule({  
declarations: [AppComponent, FirstPageModule],  
entryComponents: [FirstPageModule],  
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

it send an error, unless instead of this  
import {FirstPageModule} from ‘./first/first.module’  
put this  
import {FirstPage } from ‘./first/first.page’  
and

@NgModule({  
declarations: [AppComponent, FirstPage],  
entryComponents: [FirstPage],  
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

…

---

<div class="post-metadata">

**Author:** ![danielchirinos](https://avatars.discourse-cdn.com/v4/letter/d/7c8e57/32.png) [@danielchirinos](https://forum.ionicframework.com/u/danielchirinos)\
**Post date:** [December 26, 2018, 8:43pm UTC](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414/22 "2018-12-26T20:43:39Z")

</div>

I have done everything indicated and I continue to see the following error

 ![trouble%20modal%20dismiss](https://global.discourse-cdn.com/ionicframework/original/3X/1/8/18be8b83cccbe7daca2d5ab290b84e69aa586d74.png)

Any suggestions?

[Next page](https://forum.ionicframework.com/t/solved-ionic-4-need-to-know-how-to-work-the-modal-controller/136414.md?page=2)