Modal
ModalComponent
is a pre-built component exposed by @abp/ng.theme.shared
package to show modals. The component uses the ng-bootstrap
's modal service inside to render a modal.
The abp-modal
provides some additional benefits:
- It is flexible. You can pass header, body, footer templates easily by adding the templates to the
abp-modal
content. It can also be implemented quickly. - Provides several inputs be able to customize the modal and several outputs be able to listen to some events.
- Automatically detects the close button which has a
abpClose
directive attached to and closes the modal when pressed this button. - Automatically detects the
abp-button
and triggers its loading spinner when thebusy
input value of the modal component is true. - Automatically checks if the form inside the modal has changed, but not saved. It warns the user by displaying a confirmation popup in this case when a user tries to close the modal or refresh/close the tab of the browser.
Note: A modal can also be rendered by using the
ng-bootstrap
modal. For further information, see Modal doc on theng-bootstrap
documentation.
Getting Started
In order to use the abp-modal
in an HTML template, the ThemeSharedModule
should be imported into your module like this:
Usage
You can add the abp-modal
to your component very quickly. See an example:
See an example form inside a modal:
The modal with form looks like this:
API
Inputs
visible
visible
is a boolean input that determines whether the modal is open. It is also can be used two-way binding.
busy
busy
is a boolean input that determines whether the busy status of the modal is true. When busy
is true, the modal cannot be closed and the abp-button
loading spinner is triggered.
options
options
is an input typed NgbModalOptions. It is configuration for the ng-bootstrap
modal.
Examples:
animation
: This is an NgbModalOption property of type boolean. It controls whether the modal opens and closes with an animation. By default, it is set to true, meaning that the modal will have a smooth transition when it opens and closes. Setting it to false will disable these animations.
The result of this configuration would be like this:
On the contrary, if we set it as false:
fullscreen
: This is an NgbModalOption property of type boolean or string. When set totrue
, the element will expand to cover the entire screen, hiding all other interface elements. When set tofalse
, the element remains in its regular size and position within the page.
If fullscreen: true
:
suppressUnsavedChangesWarning
suppressUnsavedChangesWarning
is a boolean input that determines whether the confirmation popup triggering active or not. It can also be set globally as shown below:
Note: The suppressUnsavedChangesWarning
input of abp-modal
value overrides the SUPPRESS_UNSAVED_CHANGES_WARNING
injection token value.
Outputs
visibleChange
visibleChange
is an event emitted when the modal visibility has changed. The event payload is a boolean.
appear
appear
is an event emitted when the modal has opened.
disappear
disappear
is an event emitted when the modal has closed.