Hi, does anyone have a code sample on how to do a custom modal that can be ‘reused’ in any component?
My first thought was to define this custom modal as a “service” using @Injectable
.
What I am after is to create a “CustomModal” class that I can use in any other component ( lets say Z). Z should not have to import ModalController
or a template to display. All of this needs to be inside CustomModal and I should be able to associate a variable in the constructor of Z, say, myModal that can simply be used to do a myModal.show()
and myModal.dismiss
. It doesn’t need to be in the constructor, any other method is fine, as long as the CustomModal component handle the modal instantiation and template
All examples of @Injectables don’t include a selector
or a templateUrl
which I want to be part of this ‘reusable modal’
So what is the right approach and is Injectable correct to use for this?
Why isn’t it good enough to have a page called ‘GenericModal’ that you can then create and present from other pages? Either that’s fine, or there’s something you need that I don’t understand yet.
I could use that path. I was curious if all of this can be wrapped into a single component that I can directly import and invoke instead of having to import ModalController + GenericPage and instantiate the modal controllers where I need it. I understand its very little amount of code, just curious if it can be done
If you wrap it, you increase the amount of code. So I don’t think that’s a reason to do it. I’m pretty sure the way Ionic builds right now, there is a separate copy of each component on every page. But I use an AlertsManager provider that is the only place allowed to call AlertController, and all pages need to request alerts through that provider. That’s to guarantee consistency in error messages. So if you want something similar, it’s worth building a bit more structure.