ngx-multi-modal - Angular 4 + Bootstrap 4 multi modal service
Forked from ng-bootstrap's modal service.
Demo
View all the directives in action at https://rocky6.github.io/ngx-multi-modal
Dependencies
Installation
Install above dependencies via npm.
Now install ngx-multi-modal
via:
npm install --save ngx-multi-modal
SystemJS
Note:If you are using
SystemJS
, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,map
needs to tell the System loader where to look forngx-multi-modal
:
map: 'ngx-multi-modal': 'node_modules/ngx-multi-modal/bundles/ngx-multi-modal.umd.js'
Once installed you need to import the main module:
;
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgxMultiModalModule .forRoot()
):
; @
In the root level you can specify base settings to all modals inside app providing them to forRoot method.
; @
Other modules in your application can simply import NgxMultiModalModule
:
; @
Example
For detailed usage examples see demo app code.
Usage
To use modals you have to inject NgxModalStack
service.
;
Via NgxModalStack
service you gain full control over Modal Stack.
You have three ways to open modal dialogs:
/*** data: string - plain string which will be shown inside modal* options: NgxModalOptions (see NgxModalOptions interface for details)*/let ngxStringModal: StringModalRef = thismodalService; /*** template - reference to ng-template* context - template context, should be used inside ng-template via let-* syntax* options: NgxModalOptions (see NgxModalOptions interface for details)*/let ngxTemplateModal: TemplateModalRef = thismodalService;// Template context can be accessed via ngxTemplateModalcontext; /*** TestModalComponent - component class (don't forget to register component inside ngModules entryComponents)* options: NgxModalOptions (see NgxModalOptions interface for details)*/let ngxComponentModal: ComponentModalRef = thismodalService;// Component instance can be accessed via ngxComponentModalinstance;
License
Copyright (c) 2017 rocky6. Licensed under the MIT License (MIT)