https://github.com/webfactorymk/ngx-wf-modal
https://github.com/webfactorymk/ngx-wf-modal
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/webfactorymk/ngx-wf-modal
- Owner: webfactorymk
- License: mit
- Archived: true
- Created: 2017-12-25T10:53:54.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T18:29:45.000Z (over 2 years ago)
- Last Synced: 2025-01-23T09:19:19.998Z (5 months ago)
- Language: JavaScript
- Size: 25.4 KB
- Stars: 0
- Watchers: 7
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-wf-modal
A Modal Dialog Module that can receive dynamic content.
Compatible with bootstrap 3
# Install
1. Install npm module:
```bash
npm install ngx-wf-modal --save
```
2. If you are using system.js you may want to add this into `map` and `package` config:
```json
{
"map": {
"ngx-wf-modal": "node_modules/ngx-wf-modal"
},
"packages": {
"ngx-wf-modal": { "main": "index.js", "defaultExtension": "js" }
}
}
```
Add the module to your project
```typescript
@NgModule({
imports: [
NgxWfModalModule
]
...
)}
```
In the html file, you can insert the modal component
```html
{{title}}
{{message}}
OK
```
```typescript
@Input() hasCloseButton: boolean = true;
@Input() closeOnEscape: boolean = true;
@Input() closeOnOutsideClick: boolean = true;
@Input() modalSizeClass: string = "modal-lg";
@Input() modalClasses: string = "";
@Input() submitButtonText: string = "";
@Input() cancelButtonText: string = "";
```
# Inputs
### hasCloseButton: boolean (default: true)
Specifies if the top X button for closing the dialog should be shown
### closeOnEscape: boolean (default: true)
Specifies if the modal should be closed when escape is clicked
### closeOnOutsideClick: boolean (default: true)
Specifies if the modal should be closed on outside mouse clicks
### modalSizeClass: string (default: "modal-lg")
The class for the modal size (lg, md, sm)
### modalClasses: string (default: "")
Additional classes that should be added to the modal-dialog div tag
### submitButtonText: string (default: "")
The text for the submit button. If not specified, the submit button will not be shown
### cancelButtonText: string (default: "")
The text for the cancel button. If not specified, the cancel button will not be shown
# Outputs
```typescript
@Output() onModalOpened = new EventEmitter();
@Output() onModalClosed = new EventEmitter();
@Output() onModalSubmit = new EventEmitter();
@Output() onModalCancel = new EventEmitter();
```