Shared modalpage in Angular project

Ionic Framework
1

Hi all,

I am trying to setup a modal page in my Ionic 4 project. Now, the tutorial is plain clear on this, using a component (not lazy loaded), so that works.

My challenge is that the modal page will be used in multiple other pages, so I need to make it a module. I can import the page in the calling pages to show up but cannot find a way to declare that modalpage properly. If I import the ModalModule (imports) and the ModalPageComponent (entryComponents), then the full page gets replaced.

So the question is: how to structure your Angular project (modules/components) to cater for a shared component that is used as a modal (or popover) using the ModalController?

Regards

Tom

2

What I do, not sure if it’s correct or not, but I create a module for each modals, doing so they are kind of lazy loaded. Kind of because yes they are lazy loaded but will be loaded in the same time as the page.

For example if I’ve got

page1>modal1
page2>modal2

modal1 is loaded when page1 is loaded and not only when I open it

in the module of the modal I declare it in the declarations, imports and entryComponents

here an example https://github.com/fluster/fluster-app/blob/master/src/app/modals/core/date-picker/date-picker.module.ts

3

Ok thx
Will try and share my findings
Tom

1 Like
4

Hi

I think I did this differently

Modal:

  • created using ionic g page …
  • change the route in its routermodule to be ‘settings’ or something else (not being ‘’)
  • removing the routes in this module won’t work

app.routing-module.ts

  • remove auto generated routing to the modal

calling pages:

  • in its module imported the ModalModule
  • nothing on entryComponents and declarations
  • in the component part imported the ModalComponent

Works nice and I believe it is quite clean this way.

Tom

1 Like