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

Ionic Framework
24

I still have problems with this, I do not think it should be closed, although it has a solution, for the new version this does not work, or at least 4.6.0 which is the version I have

25

v4.6.0 is the Ionic CLI version not the Ionic-Angular version (which is now v4-rc.0). If that could help, I wrote a tutorial about using modals in v4, compare your code with it maybe you will find a difference -> https://medium.com/@david.dalbusco/how-to-declare-and-use-modals-in-ionic-v4-4d3f42ac30a3

1 Like
26

How do I see my version and ionic / angular? @reedrichards

27

ready i have this

Ionic:

ionic (Ionic CLI) : 4.6.0 (C:\Users\Propietario\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.0
@angular-devkit/build-angular : 0.11.4
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.2.1

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 5 other plugins)

System:

NodeJS : v10.14.2 (C:\Program Files\nodejs\node.exe)
npm : 6.5.0
OS : Windows 10

28

that’s the version you are using or alternatively have a look to your package.json

but in any case, modals just works fine in v4 too. if it doesn’t work in your project I would suggest to first have a look on what’s different in your project

29

For latest Ionic 4 Modal Example Check this tutorial link

30

The root cause of this problem is that the Angular’s compiler doesn’t know about the modal when the relevant NgModule is loaded since the modal isn’t explicitly used in the app’s templates, but is instead being created programmatically via ModalController.create(). Per the angular documentation, there are two ways that you can make the compiler aware of the component:

  1. Add it as an entry component
  2. Add it to the router (these are automatically added as entry components)

Adding the modal component to your entryComponents array (as mentioned above) will work, but a more conventional way is to simply add the modal component to your routing definition for that particular part of the application. Doing so will make the code a bit easier to read by letting you know that the modal is part of your navigation (true entryComponents are rarely ever needed). So something like this:

const myComponentRoutes: Routes = [
// ...
{
	path: 'my-modal',
	component: MyModalComponent
}
// ...

What is troubling is that, as of 2/22/19, none of this is mentioned in Ionic 4’s documentation. In general, Ionic 4 documentation is very sparse compared to Ionic 3 and is the source for a lot of headaches, especially for someone migrating a non-trivial application. I can only imagine for someone new to the platform. Another example of sparse documentation is using NavController as a service, which is actually pretty important for many apps.

Hope this helps!

5 Likes
31

How to receive data from child component after dismiss?

vm.$ionic.modalController.dismiss();
32

Dot it working

  openAirportSelectModal() {
            vm.$ionic.modalController.create({
                component: AirportForm,
                componentProps: {
                    propsData: {
                        settings: vm.settings,
                        title: "Airport",
                        eventOnClose: EventConst.modalevent.closeAirportForm
                    }
                }
            }).then(function (modalElement) {
                modalElement.present();
                modalElement.onDidDismiss().then(function (formData) {
                    modalElement.style.zIndex = -1;
                    if (formData) {
                        vm.settings.start = formData.start.toUpperCase();
                        vm.settings.product = formData.product;
                        vm.settings.maximumAltitudeAllowed = formData.maximumAltitudeAllowed;
                        vm.airportTabContent = null;
                        vm.meteogramFullData = null;
                        vm.meteogramDrawn = false;
                        MeteogramChartService.cleanMeteogramChart();
                        vm.init();
                        vm.syncRouteData();
                    }
                });
            });
        },
33

MattE, the problem I’m encountering is when I add the modal to the components.module it will pop up briefly on app load. I can’t seem to prevent it from briefly appearing. It goes away after a second, but if you hit the back button it goes back to the modal page.

1 Like
34

I’m having the same problem. Did you manage to solve this?

35

@DMoney The solution is here: https://github.com/ionic-team/ionic/issues/17098#issuecomment-454241195. Modal page module can’t have a RouterModule.forChild() line.

36

Hello @razmans please help me out

37

Put the ModalComponent in declarations as well as in entryComponents of the module .

38

Clear answer!! It helped me a lot!! Thanks!