Info

Modals

How to pop a modal

Inject the modal service in your class constructor

Call the modalService's open method (copy someone else's call if you can!). It has 2 arguments

The modal component.

And a modalConfig object (explained below)

A modalConfig object has six fields, all optional:

The button below uses the code above!

How to use the response value of a modal

The button below uses the code above! Check your console for the output.

How to create a modal

The process outlined below has been automated

Simply use yarn generate-modal --path='src/app/path/to/dir' --name=yourModal to generate and edit the required files.

Remember to check your-modal.component.ts and call it to test.

Create three new files: your-modal.module.ts, your-modal.component.ts, and your-modal.component.scss (optional). These can go in any folder.

You can call your modal your-overlay or your-drawer if you like, depending on how you expect the modal to be opened.

The module file needs to declare your modal component and set it as an entrypoint, as well as include any modules (eg. UiModule) that you may need.

Check out the files in webapp/src/bits/base/static-pages/modals/example-modal, or any other modal, for examples.

Create the UI/functionality of the modal. The modal should handle everything that happens while it's open, including all the buttons that will close it.

Call it as described above