ng2-bs4-modal with AoT support

Added AoT support

Added onBeforeClose, onBeforeDismiss, and onBeforeOpen callback inputs. those callbacks are called before closing/dismiss/opening of the modal. if the callback returns true, then the modal will be closes/dismissed/opened. If the call back retuens false, no action will be performed.

Below are the origional README from xdan/datetimepicker

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:

1<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
2<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

Or, if you're using SystemJS, configure it to load them. And import them in your typscript.

Install

1> npm install --save ng2-bs4-modal

Include a reference to the bundle in your html:

1<script src="node_modules/ng2-bs4-modal/bundles/ng2-bs4-modal.js"></script>

Or, if you're using SystemJS, add a mapping to your System.config:

1System.config({
2    defaultJSExtensions: true,
3    map: {
4        'ng2-bs4-modal': 'node_modules/ng2-bs4-modal'
5    }
6});

Then import into your application or component's module:

1import {ModalModule} from 'ng2-bs4-modal/ng2-bs4-modal';
2
3@NgModule({
4    imports: [
5        ...
6        ModalModule,
7    ]
8    ...
9})
10export class AppModule {
11}

See examples for npm, SystemJS, jspm, and angular-cli.

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

1<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>
2
3<modal #modal>
4    <modal-header [show-close]="true">
5        <h4 class="modal-title">I'm a modal!</h4>
6    </modal-header>
7    <modal-body>
8        Hello World!
9    </modal-body>
10    <modal-footer [show-default-buttons]="true"></modal-footer>
11</modal>

Static modal

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

1<modal #modal [keyboard]="false" [backdrop]="'static'">
2    <modal-header [show-close]="false">
3        <h4 class="modal-title">I'm a modal!</h4>
4    </modal-header>
5    <modal-body>
6        Hello World!
7    </modal-body>
8    <modal-footer [show-default-buttons]="true"></modal-footer>
9</modal>

Use custom buttons in footer

1<modal #modal>
2    <modal-header>
3        <h4 class="modal-title">I'm a modal!</h4>
4    </modal-header>
5    <modal-body>
6        Hello World!
7    </modal-body>
8    <modal-footer>
9        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">Cancel</button>
10        <button type="button" class="btn btn-primary" (click)="modal.close()">Ok</button>
11    </modal-footer>
12</modal>

Opening and closing the modal from the host/parent component

1import { Component, ViewChild } from 'angular/core';
2import { ModalComponent } from 'ng2-bs4-modal/ng2-bs4-modal';
3
4@Component({
5    selector: 'parent-component',
6    template: `
7        <modal #myModal>
8            ...
9        </modal>
10    `
11})
12export class ParentComponent {
13    @ViewChild('myModal')
14    modal: ModalComponent;
15
16    close() {
17        this.modal.close();
18    }
19    
20    open() {
21        this.modal.open();
22    }
23}

Autofocus on a textbox when modal is opened

1<modal #modal>
2    <modal-header>
3        <h4 class="modal-title">I'm a modal!</h4>
4    </modal-header>
5    <modal-body>
6        <div class="form-group">
7            <label for="textbox">I'm a textbox!</label>
8            <input autofocus type="text" class="form-control" id="textbox">
9        </div>        
10    </modal-body>
11    <modal-footer [show-default-buttons]="true"></modal-footer>
12</modal>

Building

1git clone https://github.com/maxfisher05/ng2-bs4-modal.git
2npm install
3npm run build

Testing

1npm test

To tell karma to watch for changes:

1npm 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.