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.
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.