Questions/Requests about ConfirmModal and PromptModal (custom css and html)

[Seb-]

Is it possible to add a custom css class for ConfirmModal or PromptModal?

I tried to add a "class" parameters in the configuration object, but that didn't seem to work.

I would also like to be able to insert html into the buttons text to add an icon to them. How should I do that?

[soumak77]

Custom CSS can be added by using the provided .confirm-modal and .prompt-modal classes.

There is no way currently to customize the HTML structure of the modals. Since the modals use the ModalFactory, it would make sense to allow customizing the configuration object used by both modals. Some properties of the configuration object such as contentScope and destroyOnClose are vital to the functionality of the modals, but properties such as class, overlay, and templateUrl can be used to adjust the styling of the modals.

I would like to make the ConfirmModal and PromptModal as easy to configure as possible, but I also don't want to go down the route of adding configuration options for every single use case as at some point it'll get out of hand. For instance, I would like to add support for icons to the buttons, but 4 configuration options would be needed of the gate:

1. Icon HTML for enter button
2. Icon HTML for cancel button
3. Icon position for enter button icon
   • available if using one of the icons supported by Angular Icons
4. Icon position for cancel button icon
   • available if using one of the icons supported by Angular Icons

Adding icons to the modals could instead be done by creating a new template for the modals and overriding the default template provided by Angular Base Apps. This is probably the best approach to cover all use cases.

If you need anything more complex (like modifying contentScope), it likely points to needing to write your own implementation of the modals.

[soumak77]

@Seb- if you need support for this right away, you can inject the html into the buttons after the modal has been rendered. The enter and cancel buttons have the enter-button and cancel-button classes, respectively.

[soumak77]

@Seb- I've created a new issue to add support for overriding the templateUrl property. Is there anything else that needs to be addressed before this can be closed?

[soumak77]

closing with the assumption this is resolved

[Seb-]

I need to progress in my project and this seems to be too much for the result so I gave up on it for the moment and just kept default. The information was useful though. I might get back to it and comment more when I have time to play with this.