Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pleerock/ngx-modal
Open modal window (dialog box) for your angular2 applications using bootstrap3.
https://github.com/pleerock/ngx-modal
Last synced: about 1 month ago
JSON representation
Open modal window (dialog box) for your angular2 applications using bootstrap3.
- Host: GitHub
- URL: https://github.com/pleerock/ngx-modal
- Owner: pleerock
- Archived: true
- Created: 2016-03-02T11:24:04.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-03T23:41:03.000Z (over 7 years ago)
- Last Synced: 2024-10-13T20:32:24.319Z (about 2 months ago)
- Language: TypeScript
- Size: 50.8 KB
- Stars: 107
- Watchers: 10
- Forks: 82
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-modal - Open modal window (dialog box) for your angular2 applications using bootstrap3. (Uncategorized / Uncategorized)
README
> This repository is for demonstration purposes of how it can be implemented in Angular and is not maintaned.
Please fork and maintain your own version of this repository.
# ngx-modal
Open modal window (dialog box) for your angular2 applications using bootstrap3. If you don't want to use it without bootstrap - simply create proper css classes. Please star a project if you liked it, or create an issue if you have problems with it.
## Installation
1. Install npm module:
`npm install ngx-modal --save`
2. If you are using system.js you may want to add this into `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
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
```typescript
import {Component} from "@angular/core";
import {ModalModule} from "ngx-modal";
@Component({
selector: "app",
template: `
open my modal
Modal header
Hello Modal!
close
`
})
export class App {
}
@NgModule({
imports: [
// ...
ModalModule
],
declarations: [
App
],
bootstrap: [
App
]
})
export class AppModule {
}
```
## More samples
```html
modal with custom header content and footer
I am first modal
This modal has its own header, content and footer.
okay!
modal without close button
I am second modal
This modal does not have close button.
okay!
modal that cannot be simply closed
I am third modal
You cannot close this modal by pressing "ESC" button or clicking outside of the modal.
okay!
modal that has title and cancel button
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.
large modal
Very large modal.
small modal
Very small modal.
it opens first modal after you close it
Now try to close it and it will open you first modal.
it opens first modal right after you open it
This modal opened first modal right after you opened it.
it opens first modal after you click submit button
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.
```
Take a look on samples in [./sample](https://github.com/pleerock/ngx-modal/tree/master/sample) for more examples of
usages.