Create a modal without a new component?

Ionic Framework ionic-v3
1

This may be an angular thing. I have a page where some of the functionality is in a modal (kebab button to pop up a dialog that’s got some options / edit stuff in it). The key issue is that this particular modal is a singleton - it only ever appears on this page, and it shares a lot of functional overlap with the parent page.

The way it is implemented now is I’ve got a page for ItemEdit, which has a controller, item-edit.ts. There’s also a component for ItemEditPopupComponent that contains the template for the popup, its own controller, and so on. This is unsatisfying, because some of the item edit functionality is implemented in the controller for popup, and some is in the main page controller.

In angularjs 1.x, it was possible to futz around with scopes so you could access parent data and methods in the child scope (so I could pop up the modal, but all the data and methods would be on the page controller).

What I’d prefer doing is shoving the template HTML that currently lives in ItemEditPopopComponent into the template for ItemEditPage, and just have the one controller. I can do this manually by shoving that stuff into an ngContainer and controlling its visibility with ngIf, but that kind of misses the utility of the Modal controller - i’d have to manually deal with background clicks, z index stuff, scaling to devices, and so on.

So: is there any sneaky way to use the Modal controller to pop up something that’s a child template defined in the existing page? It’d be keen if I could do something like:

<ion-content>
   <!-- some stuff here -->
   <ion-modal #saveModal>
      <!-- modal template here -->
   </ion-modal>
</ion-content>

and then just call ModalController.create(this.saveModal) (assuming I grabbed the modal block with a @ViewChild.

Is there anything like that available? Am I just barking up the wrong tree?

2

Might it be possible to move all the actual editing functionality into a service provider that is injected by both the host page and the modal?

3

yeah, that could help a bit; I’d just end up doing editSvc.flagPrivate() on the (tap) events instead of flagPrivate() in the various html templates. Doesn’t help the part where half my markup is in components/ItemEditPopup and half is in pages/ItemEditPage though. Ah well - I can just leave it all alone, since it does work, it’s just lacking in the elegance department.

4

Hi

I would still make a separate component that interacts with the parent using the Angular Input and Output decorators.

Easier testing and very elegant.

Angular.io has great doc on the best ways to do parent-child stuff. Many ways.

Rgdz

Tom