# ng2-bs4-modal

> Angular2 Boostrap4 Modal Component

Latest version **0.6.2** (published 2018-05-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install ng2-bs4-modal
pnpm add ng2-bs4-modal
yarn add ng2-bs4-modal
bun add ng2-bs4-modal
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.2 |
| Published | 2018-05-03 |
| First published | 2016-04-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Douglas Ludlow |
| Maintainers | maxfisher05 |
| Keywords | angular2, bootstrap, modal, component |

## Links

- npm: https://www.npmjs.com/package/ng2-bs4-modal
- Repository: https://github.com/maxfisher05/ng2-bs4-modal
- Homepage: https://github.com/dougludlow/ng2-bs3-modal#readme
- Issues: https://github.com/dougludlow/ng2-bs3-modal/issues
- npm.io page: https://npm.io/package/ng2-bs4-modal

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.6.2 (latest) — 2018-05-03
- 0.6.1 — 2018-05-03
- 0.6.0 — 2018-05-02
- 0.5.1 — 2017-11-09
- 0.5.0 — 2017-11-09
- 0.4.0 — 2017-07-07
- 0.4.0-beta.0 — 2017-07-07
- 0.2.0 — 2017-01-18
- 0.1.2 — 2016-10-06
- 0.1.1 — 2016-09-06
- 0.1.0 — 2016-08-31
- 0.0.7 — 2016-07-13
- 0.0.6 — 2016-06-21
- 0.0.5 — 2016-06-21
- 0.0.4 — 2016-06-16
- … 3 more at https://npm.io/package/ng2-bs4-modal/versions

## README

# ng2-bs4-modal [![npm version](https://badge.fury.io/js/ng2-bs3-modal.svg)](http://badge.fury.io/js/ng2-bs3-modal) [![npm downloads](https://img.shields.io/npm/dm/ng2-bs3-modal.svg)](https://npmjs.org/ng2-bs3-modal) [![Build Status](https://travis-ci.org/dougludlow/ng2-bs3-modal.svg?branch=master)](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
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
```  

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
<script src="node_modules/ng2-bs4-modal/bundles/ng2-bs4-modal.js"></script>
```
    
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
<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>
```
    
![Example](demo/images/modal.png)
    
### Static modal

This will create a modal that cannot be closed with the escape key or by clicking outside of the modal.

```html
<modal #modal [keyboard]="false" [backdrop]="'static'">
    <modal-header [show-close]="false">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>
```
    
### Use custom buttons in footer

```html    
<modal #modal>
    <modal-header>
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer>
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">Cancel</button>
        <button type="button" class="btn btn-primary" (click)="modal.close()">Ok</button>
    </modal-footer>
</modal>
```
    
![Example](demo/images/modal-custom-footer.png)
    
### 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: `
        <modal #myModal>
            ...
        </modal>
    `
})
export class ParentComponent {
    @ViewChild('myModal')
    modal: ModalComponent;

    close() {
        this.modal.close();
    }
    
    open() {
        this.modal.open();
    }
}
```

### Autofocus on a textbox when modal is opened

```html    
<modal #modal>
    <modal-header>
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        <div class="form-group">
            <label for="textbox">I'm a textbox!</label>
            <input autofocus type="text" class="form-control" id="textbox">
        </div>        
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>
```

## 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).

---
_Source: https://npm.io/package/ng2-bs4-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._