ng2-bs4-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, 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, 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, SystemJS, jspm, and angular-cli.



API

$3

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

$3

#### Inputs

- show-close: boolean, default: false

Show or hide the close button in the header. Specify true to show.



$3

#### Inputs

- show-default-buttons: boolean, default: false

Show or hide the default 'Save' and 'Close' buttons in the header. Specify true to show.

Examples

$3

`html
Open me!





I'm a modal!




Hello World!



`

!Example

$3

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!



`

$3

`html




I'm a modal!




Hello World!


Cancel
Ok


`

!Example

$3

`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();
}
}
`

$3

`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.

Contributions are welcome! Feel free to open a pull request.