Open modal window (dialog box) for your angular2 applications using bootstrap3.
npm install ngx-modalnpm install ngx-modal --save
map and package config:
json
{
"map": {
"ngx-modal": "node_modules/ngx-modal"
},
"packages": {
"ngx-modal": { "main": "index.js", "defaultExtension": "js" }
}
}
`
Simple Modal
Import ModalModule in your app. Then you can use modal component:
`html
submitButtonLabel="submit"
modalClass="modal-lg modal-sm any-other-css-class"
[hideCloseButton]="true|false"
[closeOnEscape]="true|false"
[closeOnOutsideClick]="true|false"
(onOpen)="actionOnOpen()"
(onClose)="actionOnClose()"
(onSubmit)="actionOnSubmit()">
Modal header content goes there.
Modal body content goes there.
Modal footer content goes there.
`
Router Modal
First, import ModalModule in your app.
If you want your modals to be opened within routes,
then should be used instead.
Sample
`javascript
import {Component} from "@angular/core";
import {ModalModule} from "ngx-modal";
@Component({
selector: "app",
template:
})
export class App {
}
@NgModule({
imports: [
// ...
ModalModule
],
declarations: [
App
],
bootstrap: [
App
]
})
export class AppModule {
}
`
More samples
`html
I am first modal
This modal has its own header, content and footer.
I am second modal
This modal does not have close button.
I am third modal
You cannot close this modal by pressing "ESC" button or clicking outside of the modal.
You can simply use "title" attribute to provide a modal default header.
Also you can add default cancel button by providing a label to it.
Very large modal.
Very small modal.
Now try to close it and it will open you first modal.
This modal opened first modal right after you opened it.
This modal has a submit button with your custom label. Also it can make an action after you
click that submit button. Here it will open you first modal after you click submit.
``