Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nowzoo/ngx-bootstrap-modal
Bootstrap modals for Angular
https://github.com/nowzoo/ngx-bootstrap-modal
Last synced: 11 days ago
JSON representation
Bootstrap modals for Angular
- Host: GitHub
- URL: https://github.com/nowzoo/ngx-bootstrap-modal
- Owner: nowzoo
- License: mit
- Created: 2019-03-26T17:56:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-03-28T12:22:03.000Z (over 5 years ago)
- Last Synced: 2024-10-13T16:10:19.129Z (about 1 month ago)
- Language: TypeScript
- Size: 1.79 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @nowzoo/ngx-bootstrap-modal
A minimal library for implementing Bootstrap 4 modals in Angular. The library depends on the native Bootstrap and jQuery code.
[Demo App](https://nowzoo.github.io/ngx-bootstrap-modal/) |
[Demo App Code](https://github.com/nowzoo/ngx-bootstrap-modal/tree/master/projects/ngx-bootstrap-modal-demo)
## Quick Start
Install the library and its dependencies...
```bash
npm i -S @nowzoo/ngx-bootstrap-modal jquery popper.js bootstrap
```
Include the dependencies in some way in your build, for example via `angular.json`...
```json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"projects/ngx-bootstrap-modal-demo/src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
```
Import the module...
```ts
//...
import { NgxBootstrapModalModule } from '@nowzoo/ngx-bootstrap-modal';
@NgModule({
imports: [
NgxBootstrapModalModule
//...
]
//...
})
export class MyModule { }
```
The modals are built from native Bootstrap markup contained in an ``. All the modal options and behaviors are controlled solely via this markup. Example component html...
```html
```
To show the modal, first inject the `NgxBootstrapModalService` into your component and grab a reference to the `` containing the modal markup with `ViewChild`. Then show the modal with the service's `show(templateRef)` method...
```ts
import { ViewChild, TemplateRef } from '@angular/core';
import { NgxBootstrapModalService, INgxBootstrapModalInstance } from '@nowzoo/ngx-bootstrap-modal';
export class MyComponent {
// grabs the from the component template
@ViewChild('myModal') modalTemplate: TemplateRef;
modalInstance: INgxBootstrapModalInstance = null;
// accessibility...
id = 'some-unique-id';
constructor(
private modalService: NgxBootstrapModalService
) { }
show() {
this.modalInstance = this.modalService.show(this.modalTemplate);
this.modalInstance.shown.then(() => {
// maybe focus something...
});
this.modalInstance.hidden.then(() => {
// do stuff based on what's just happened in the modal...
this.modalInstance = null;
})
}
}
```
## API
```ts
class NgxBootstrapModalService {
show(templateRef: TemplateRef): INgxBootstrapModalInstance
}
interface INgxBootstrapModalInstance {
// The modal element, useful for focusing fields within it.
modalEl: HTMLElement;
// Resolves when the modal has been completely shown.
shown: Promise;
// Resolves when the modal has been completely hidden.
hidden: Promise;
// An observable of the modal's native Bootstrap events.
events: Observable;
// Hide the modal.
hide: () => Promise;
// Use this to update the modal's positioning when it's likely that the content has changed its height.
handleUpdate: () => void;
}
```
## Development
Contributions are welcome. This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
```bash
git clone https://github.com/nowzoo/ngx-bootstrap-modal.git
npm i
```
The library code is located in `projects/ngx-bootstrap-modal`.
To run tests:
- `ng test ngx-bootstrap-modal`
- or use the `wallaby.js` file at `projects/ngx-bootstrap-modal/wallaby.js`
Build the library with `ng build ngx-bootstrap-modal`.
The demo project is located at `projects/ngx-bootstrap-modal-demo`.
Serve the demo:
```bash
ng serve ngx-bootstrap-modal-demo --open
```
Note that you have to build the library for any changes to show up in the demo app. This does not happen automatically.
## License
[MIT](https://github.com/nowzoo/ngx-bootstrap-modal/blob/master/LICENSE)