Angular Basic Modal
The angular-basic-modal is a lightweight, extendable Angular 2+ (2.3.0 and beyond) modal solution that will programatically create a modal, add it to the DOM, and then delete it from the DOM when the modal is dismissed. The modal returns a promise that indicates how the modal dismissed that can then be used for further processing.
A default modal style is provided that can be extended to create modals with any style sheet, including Bootstrap. A working demo shows the basic modal and two extended version (icon and Bootstrap 3) in action with user adjustable customizations.
How to use?
$ npm i angular-basic-modal --save
Integration
The angular-basic-modal should work as-is with webpack/angular-cli. Just add the AngularBasicModalModule
:
;
Usage
Basic usage is:
bmc = new BaseModalConfig; constructorprivate modal:BasicModalService ... ngOnInit
The BaseModalConfig
contains the settings for the modal and is injected
when the modal is created by calling show(config:BaseModalConfig, modal:Type<BaseModal>)
on the BasicModalService
. The modal loaded can
either be the default BaseModal
component or a component extending it. See
the IconModal
and BootstrapModal
component in the demo for examples.
The following parameters are settable on the BaseModalConfig
:
- title - HTML or text for the modal's title.
- message - HTML or text for the modal's body.
- blocking - whether or not the modal can be dismissed by clicking the overlay.
- confirmBtn - label of the optional confirm button. The confirmButton is associated with the confirm() function, which may optionally take a string to return via the modal's promise if clicked ( for example click('foo') would return 'foo' ). If no string is given for the confirm() function's parameter, then the confirmBtn label will be returned.
- cancelBtn - label of the cancel button, which is optional if not blocking. The cancelButton is associated with the cancel() function, which may optionally take a string to return via the modal's promise if clicked ( for example: click('bar') ). If no string is given for the cancel() function's parameter, then the cancelBtn label will be returned.
- width/height - (size) For the Bootstrap demo, the
[ngClass]
attribute on<div class="modal-dialog">
element uses the width to adjust the size according.
Extending
As noted above, the BaseModal can be extended. Here is a Webpack example for a Bootstrap styled modal.
The component:
;;;
The template:
×Close {{confirmBtn}} {{cancelBtn}} `
The demo has an example for SystemJS. Namely the difference is in how BaseModalConfig
and BaseModal
are imported.
;
License
MIT
Author
- David Czeck @czeckd