|
|
# Modals
|
|
|
|
|
|
## Outlet
|
|
|
# Outlet
|
|
|
The modal outlet is the container for our modals. Currently the outlet only supports one modal open at a time, though this could probably be adjusted to be able to support any amount of open modals if needed.
|
|
|
|
|
|
Somewhere in your templates (default `app.component.html`), you'll need to place the following:
|
... | ... | @@ -11,7 +9,7 @@ Somewhere in your templates (default `app.component.html`), you'll need to place |
|
|
|
|
|
It really shouldn't matter where this is placed at, but it's probably best to keep it in `app.component.html` at the end of the file.
|
|
|
|
|
|
## Service
|
|
|
# Service
|
|
|
The `ModalService` hooks into the outlet, and can inject any component into it with a set of options for customization.
|
|
|
|
|
|
To open a modal, you need to have the ModalService and the component you want to open imported, and run the following:
|
... | ... | @@ -38,7 +36,7 @@ entryComponents: [ |
|
|
]
|
|
|
```
|
|
|
|
|
|
## Options
|
|
|
# Options
|
|
|
There are options that can be set to override default behavior. Below are the default options. You aren't limited to these options, you can add any fields you want.
|
|
|
|
|
|
``` javascript
|
... | ... | @@ -52,7 +50,7 @@ There are options that can be set to override default behavior. Below are the d |
|
|
};
|
|
|
```
|
|
|
|
|
|
## Position option
|
|
|
# Position option
|
|
|
|
|
|
By default, the modal will be placed in the center of the screen. You can override the options to place the modal anywhere you like.
|
|
|
|
... | ... | @@ -66,7 +64,7 @@ By default, the modal will be placed in the center of the screen. You can overr |
|
|
}
|
|
|
```
|
|
|
|
|
|
## Putting it all together.
|
|
|
# Putting it all together.
|
|
|
|
|
|
Included in the template is a override-able confirm modal. Here's an example of opening the confirm modal, with no backdrop, no close button, 600px wide, in the top right, with data passed to it, and subscribing to the users selection.
|
|
|
|
... | ... | |