Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dougludlow/ng2-bs3-modal
Angular Bootstrap 3 Modal Component
https://github.com/dougludlow/ng2-bs3-modal
angular angular-component angular2 modal ng2-bs3-modal
Last synced: 3 months ago
JSON representation
Angular Bootstrap 3 Modal Component
- Host: GitHub
- URL: https://github.com/dougludlow/ng2-bs3-modal
- Owner: dougludlow
- License: isc
- Archived: true
- Created: 2016-02-04T16:53:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2020-09-07T13:02:28.000Z (over 4 years ago)
- Last Synced: 2024-09-19T12:07:18.219Z (3 months ago)
- Topics: angular, angular-component, angular2, modal, ng2-bs3-modal
- Language: TypeScript
- Homepage: http://dougludlow.github.io/ng2-bs3-modal/
- Size: 1.05 MB
- Stars: 261
- Watchers: 26
- Forks: 133
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular-components - ng2-bs3-modal - Angular2 Bootstrap3 Modal Component. (Uncategorized / Uncategorized)
- awesome-angular - ng2-bs3-modal - Angular2 Bootstrap3 Modal Component. (Uncategorized / Uncategorized)
- awesome-angular-components - ng2-bs3-modal - Angular2 Bootstrap3 Modal Component (Uncategorized / Uncategorized)
- awesome-angular-components - ng2-bs3-modal - Angular2 Bootstrap3 Modal Component. (Uncategorized / Uncategorized)
- awesome-angular-components - dougludlow/ng2-bs3-modal - Angular Bootstrap 3 Modal Component (UI Components / Overlay)
README
# ng2-bs3-modal [](http://badge.fury.io/js/ng2-bs3-modal) [](https://npmjs.org/ng2-bs3-modal) [](https://travis-ci.org/dougludlow/ng2-bs3-modal)
Angular (2+) Bootstrap 3 Modal Component
## Demo
http://dougludlow.github.io/ng2-bs3-modal/
## Dependencies
`ng2-bs3-modal` depends on `bootstrap` which depends on `jquery`. You'll need to include both scripts before `ng2-bs3-modal` or somehow make them available globally, depending on your build system. Example:
```bash
npm install jquery bootstrap@^3.3.7
```
**`./jquery.ts`**
```typescript
import * as $ from 'jquery';
window['jQuery'] = window['$'] = $;
```
**`./main.ts`**
```typescript
import './jquery';
import 'bootstrap/js/modal'; // or just 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'; // optional
```
## Install
npm
```bash
npm install --save ng2-bs3-modal
```
yarn
```bash
yarn add ng2-bs3-modal
```
Then include the module in the `imports` collection of your app's module:
```typescript
import { NgModule } from '@angular/core';
import { BsModalModule } from 'ng2-bs3-modal';
@NgModule({
imports: [ BsModalModule ]
...
})
export class MyAppModule { }
```
## API
### BsModalComponent
#### 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.
- `cssClass: string`, default: `undefined`
Applies the given class to the modal. Can be used to styles the modal; for example, giving it a custom size.
#### Outputs
- `onShow: EventEmitter`
Emits when the `show.bs.modal` event is triggered, just before the modal is shown. Call `Event.preventDefault()` to cancel the modal from showing.
- `onHide: EventEmitter`
Emits when the `hide.bs.modal` event is triggered, just before the modal is hidden. Call `BsModalHideEvent.event.preventDefault()` to cancel the modal from hiding.
- `onClose: EventEmitter`
Emits when `ModalComponent.close()` is called. Will emit whatever was passed into `ModalComponent.close()`.
- `onDismiss: EventEmitter`
Emits when `ModalComponent.dismiss()` is called, or when the modal is dismissed with the keyboard or backdrop. Returns a `BsModalHideType` that can be used to determine how the modal was dismissed.
- `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(value?: any): Promise`
Closes the modal. Causes `onClose` to be emitted. Returns a promise that resolves the value passed to `close` 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.
### BsModalHeaderComponent
#### Inputs
- `showDismiss: boolean`, default: `false`
Show or hide the close button in the header. Specify `true` to show.
### BsModalFooterComponent
#### Inputs
- `showDefaultButtons: boolean`, default: `false`
Show or hide the default 'Close' and 'Dismiss' buttons in the footer. Specify `true` to show.
- `closeButtonLabel: string`, default: `'Close'`
Change the label in the default 'Close' button in the footer. Has no effect if showDefaultButtons aren't set.
- `dismissButtonLabel: string`, default: `'Dismiss'`
Change the label in the default 'Dismiss' button in the footer. Has no effect if showDefaultButtons aren't set.
### BsModalService
#### Methods
- `dismissAll(): void`
Dismiss all open modals. Inject the `BsModalService` into a componet/service to use.
## Example Usage
### 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 a parent component
```typescript
import { Component, ViewChild } from '@angular/core';
import { BsModalComponent } from 'ng2-bs3-modal';
@Component({
selector: 'parent-component',
template: `
...
`
})
export class ParentComponent {
@ViewChild('myModal')
modal: BsModalComponent;
close() {
this.modal.close();
}
open() {
this.modal.open();
}
}
```
### Opening the modal when the parent component loads
```typescript
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { BsModalComponent } from 'ng2-bs3-modal';
@Component({
selector: 'parent-component',
template: `
...
`
})
export class ParentComponent implements AfterViewInit {
@ViewChild('myModal')
modal: BsModalComponent;
ngAfterViewInit() {
this.modal.open();
}
}
```
Note: `ViewChild` doesn't resolve the `modal` property until `AfterViewInit`. `OnInit` is too early and will result in an "undefined" error.
### Multiple modals in a component
```typescript
import { Component, ViewChild } from '@angular/core';
import { BsModalComponent } from 'ng2-bs3-modal';
@Component({
selector: 'parent-component',
template: `
...
...
`
})
export class ParentComponent {
@ViewChild('myFirstModal')
modal1: BsModalComponent;
@ViewChild('mySecondModal')
modal2: BsModalComponent;
...
}
```
### Modal with a custom size
```typescript
import { Component, ViewChild } from '@angular/core';
import { BsModalComponent } from 'ng2-bs3-modal';
@Component({
selector: 'parent-component',
styles: ['>>> .modal-xl { width: 1100px; }'],
template: `
...
`
})
export class ParentComponent {
...
}
```
Note: Angular2 emulates the shadow dom by prefixing component styles with a unique identifier. Because the modal is attached to the body tag, it doesn't pick up these styles. You will need to add the `/deep/` or `>>>` selector in order for the style to take effect. See [Component Styles](https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-).
### Modal in NgFor
```typescript
import { Component, ViewChildren } from '@angular/core';
import { BsModalComponent } from 'ng2-bs3-modal';
@Component({
selector: 'parent-component',
template: `
Open me!
...
`
})
export class ParentComponent {
@ViewChildren(BsModalComponent)
modals: QueryList; // How to access a collection of modals
...
}
```
Note: If you are updating items asynchronously, make sure you are using `trackBy` in the `ngFor` directive so that Angular doesn't teardown and redraw the elements each time the collection is changed. See [NgFor Directive](https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html) for more details.
### Modal with validation
```html
I'm a modal!
First Name
Last Name
Cancel
Save
```
### Autofocus on a textbox when modal is opened
```html
I'm a modal!
I'm a textbox!
```
## Building
```bash
git clone https://github.com/dougludlow/ng2-bs3-modal.git
yarn
yarn build
```
## Running
```bash
yarn start
```
Navigate to http://localhost:4200/ in your browser.
## Testing
```bash
yarn test:lib
```
## 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).