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 for ngx-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:
import { NgxMultiModalModule } from 'ngx-multi-modal';
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()
):
import { NgxMultiModalModule } from 'ngx-multi-modal';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgxMultiModalModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
In the root level you can specify base settings to all modals inside app providing them to forRoot method.
import { NgxMultiModalModule } from 'ngx-multi-modal';
@NgModule({
declarations: [AppComponent, ...],
imports: [
NgxMultiModalModule.forRoot(
{
backdrop: false,
container: '#modal_container',
size: 'lg',
keyboard: false,
windowClass: ''
}
)],
bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application can simply import NgxMultiModalModule
:
import { NgxMultiModalModule } from 'ngx-multi-modal';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgxMultiModalModule, ...],
})
export class OtherModule {
}
Example
For detailed usage examples see demo app code.
Usage
To use modals you have to inject NgxModalStack
service.
constructor(public modalService: NgxModalStack);
Via NgxModalStack
service you gain full control over Modal Stack.
You have three ways to open modal dialogs:
let ngxStringModal: StringModalRef = this.modalService.openFromString(data, this.options);
let ngxTemplateModal: TemplateModalRef = this.modalService.openFromTemplate(template, context, this.options);
ngxTemplateModal.context;
let ngxComponentModal: ComponentModalRef = this.modalService.openFromComponent(TestModalComponent, this.options);
ngxComponentModal.instance;
License
Copyright (c) 2017 rocky6. Licensed under the MIT License (MIT)