Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maxfisher05/ng2-bs4-modal
Angular2 Bootstrap4 Modal Component
https://github.com/maxfisher05/ng2-bs4-modal
Last synced: about 1 month ago
JSON representation
Angular2 Bootstrap4 Modal Component
- Host: GitHub
- URL: https://github.com/maxfisher05/ng2-bs4-modal
- Owner: maxfisher05
- License: isc
- Fork: true (dougludlow/ng2-bs3-modal)
- Created: 2016-04-28T20:57:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-07T21:01:20.000Z (over 6 years ago)
- Last Synced: 2024-09-19T18:37:46.612Z (3 months ago)
- Language: TypeScript
- Homepage: http://dougludlow.github.io/ng2-bs3-modal/
- Size: 262 KB
- Stars: 13
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular-components - ng2-bs4-modal - Angular2 Bootstrap4 Modal Component (Uncategorized / Uncategorized)
README
# ng2-bs4-modal [](http://badge.fury.io/js/ng2-bs3-modal) [](https://npmjs.org/ng2-bs3-modal) [](https://travis-ci.org/dougludlow/ng2-bs3-modal)
Angular2 Bootstrap4 Modal Component
## Demo
http://maxfisher05.github.io/ng2-bs4-modal/
## Dependencies
`ng2-bs4-modal` depends on bootstrap which depends on jquery, you'll need to include both scripts before ng2-bs4-modal:
```html
```
Or, if you're using [SystemJS](https://github.com/systemjs/systemjs), configure it to load them. And import them in your typscript.
## Install
```bash
> npm install --save ng2-bs4-modal
```
Include a reference to the bundle in your html:
```html
```
Or, if you're using [SystemJS](https://github.com/systemjs/systemjs), add a mapping to your System.config:
```javascript
System.config({
defaultJSExtensions: true,
map: {
'ng2-bs4-modal': 'node_modules/ng2-bs4-modal'
}
});
```
Then import into your application or component's module:
```typescript
import {ModalModule} from 'ng2-bs4-modal/ng2-bs4-modal';
@NgModule({
imports: [
...
ModalModule,
]
...
})
export class AppModule {
}
```
See examples for [npm](https://github.com/dougludlow/ng2-bs3-modal-demo-npm), [SystemJS](https://github.com/dougludlow/ng2-bs3-modal-demo-systemjs), [jspm](https://github.com/dougludlow/ng2-bs3-modal-demo-jspm), and [angular-cli](https://github.com/dougludlow/ng2-bs3-modal/issues/31).
## API
### ModalComponent
#### Inputs
- `animation: boolean`, default: `true`
Specify `false` to simply show the modal rather than having it fade in/out of view.
- `backdrop: string | boolean`, default: `true`
Specify `'static'` for a backdrop which doesn't close the modal on click or `false` for no backdrop.
- `keyboard: boolean`, default: `true`
Closes the modal when escape key is pressed. Specify `false` to disable.
- `size: string`, default: `undefined`
Specify `'sm'` for small and `'lg'` for large.
#### Outputs
- `onClose: EventEmitter`
Emits when `ModalComponent.close()` is called.
- `onDismiss: EventEmitter`
Emits when `ModalComponent.dismiss()` is called, or when the modal is dismissed with the keyboard or backdrop.
- `onOpen: EventEmitter`
Emits when `ModalComponent.open()` is called.
#### Methods
- `open(size?: string): Promise`
Opens the modal. Size is optional. Specify `'sm'` for small and `'lg'` for large to override size. Returns a promise that resolves when the modal is completely shown.
- `close(): Promise`
Closes the modal. Causes `onClose` to be emitted. Returns a promise that resolves when the modal is completely hidden.
- `dismiss(): Promise`
Dismisses the modal. Causes `onDismiss` to be emitted. Returns a promise that resolves when the modal is completely hidden.
### ModalHeaderComponent
#### Inputs
- `show-close: boolean`, default: `false`
Show or hide the close button in the header. Specify `true` to show.
### ModalFooterComponent
#### Inputs
- `show-default-buttons: boolean`, default: `false`
Show or hide the default 'Save' and 'Close' buttons in the header. Specify `true` to show.
## Examples
### Default modal
```html
Open me!
I'm a modal!
Hello World!
```
### Static modal
This will create a modal that cannot be closed with the escape key or by clicking outside of the modal.
```html
I'm a modal!
Hello World!
```
### Use custom buttons in footer
```html
I'm a modal!
Hello World!
Cancel
Ok
```
### Opening and closing the modal from the host/parent component
```typescript
import { Component, ViewChild } from 'angular/core';
import { ModalComponent } from 'ng2-bs4-modal/ng2-bs4-modal';
@Component({
selector: 'parent-component',
template: `
...
`
})
export class ParentComponent {
@ViewChild('myModal')
modal: ModalComponent;
close() {
this.modal.close();
}
open() {
this.modal.open();
}
}
```
### Autofocus on a textbox when modal is opened
```html
I'm a modal!
I'm a textbox!
```
## Building
```bash
git clone https://github.com/maxfisher05/ng2-bs4-modal.git
npm install
npm run build
```
## Testing
```bash
npm test
```
To tell karma to watch for changes:
```bash
npm run test-watch
```
## Bugs/Contributions
Report all bugs and feature requests on the [issue tracker](https://github.com/dougludlow/ng2-bs3-modal/issues).
Contributions are welcome! Feel free to open a [pull request](https://github.com/dougludlow/ng2-bs3-modal/pulls).