#Angular2 Bootstrap Modal Service

It is a library to make usage of bootstrap modal plugin easier in Angular2. Create clear and reusable modal components. It makes managing dialogs painless and more clear.

Library does not use bootstrap js, only css.

Compatible with bootstrap 3 and bootstrap 4.

##Installation

1npm install ng2-bootstrap-modal

See Live Demo

###Without bootstrap? Yes, you can create your own css. Just write css for .modal and .modal-dialog classes.

1.modal {
2    position: fixed;
3    top: 0;
4    right: 0;
5    bottom: 0;
6    left: 0;
7    z-index: 1050;
8    overflow: hidden;
9    -webkit-overflow-scrolling: touch;
10    outline: 0;
11}
12
13.fade {
14    opacity: 0;
15    -webkit-transition: opacity .15s linear;
16    -o-transition: opacity .15s linear;
17    transition: opacity .15s linear;
18}
19
20.fade.in {
21    opacity: 1;
22}
23
24.modal-dialog {
25    position: relative;
26    width: auto;
27    margin: 10px;
28}
29
30.modal.in .modal-dialog {
31    -webkit-transform: translate(0,0);
32    -ms-transform: translate(0,0);
33    -o-transform: translate(0,0);
34    transform: translate(0,0);
35}
36
37.modal.fade .modal-dialog {
38    -webkit-transition: -webkit-transform .3s ease-out;
39    -o-transition: -o-transform .3s ease-out;
40    transition: transform .3s ease-out;
41    -webkit-transform: translate(0,-25%);
42    -ms-transform: translate(0,-25%);
43    -o-transform: translate(0,-25%);
44    transform: translate(0,-25%);
45}
46
47@media (min-width: 768px) {
48    .modal-dialog {
49        width: 600px;
50        margin: 30px auto;
51    }
52}

##Quickstart

Step 1. add bootstrap css

You can add bootstrap css from cdn

1<!-- Bootstrap 3.x -->
2<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

or

1<!-- Bootstrap 4.x -->
2<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Step 1. import 'BootstrapModalModule' module

app.module.ts:

1import { NgModule} from '@angular/core';
2import { CommonModule } from "@angular/common";
3import { BrowserModule } from '@angular/platform-browser';
4import { BootstrapModalModule } from 'ng2-bootstrap-modal';
5import { AppComponent } from './app.component';
6@NgModule({
7  declarations: [
8    AppComponent
9  ],
10  imports: [
11    CommonModule,
12    BrowserModule,
13    BootstrapModalModule
14  ],
15  bootstrap: [AppComponent]
16})
17export class AppModule {}

By default dialogs placeholder will be added to AppComponent. But you can select custom placeholder (for example document body):

1imports: [
2    ...
3    BootstrapModalModule.forRoot({container:document.body})
4  ]

###Step 2. Create your modal dialog component Your modal dialog is expected to be extended from DialogComponent. DialogService is generic class with two arguments:

1. input dialog data type (data to initialize component);
2. dialog result type;

Therefore DialogService is supposed to be a constructor argument of DialogComponent.

confirm.component.ts:

1import { Component } from '@angular/core';
2import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
3export interface ConfirmModel {
4  title:string;
5  message:string;
6}
7@Component({  
8    selector: 'confirm',
9    template: `<div class="modal-dialog">
10                <div class="modal-content">
11                   <div class="modal-header">
12                     <button type="button" class="close" (click)="close()" >&times;</button>
13                     <h4 class="modal-title">{{title || 'Confirm'}}</h4>
14                   </div>
15                   <div class="modal-body">
16                     <p>{{message || 'Are you sure?'}}</p>
17                   </div>
18                   <div class="modal-footer">
19                     <button type="button" class="btn btn-primary" (click)="confirm()">OK</button>
20                     <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
21                   </div>
22                 </div>
23              </div>`
24})
25export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
26  title: string;
27  message: string;
28  constructor(dialogService: DialogService) {
29    super(dialogService);
30  }
31  confirm() {
32    // we set dialog result as true on click on confirm button, 
33    // then we can get dialog result from caller code 
34    this.result = true;
35    this.close();
36  }
37}

###Step 3. Register created component to module Add component to declarations and entryComponents section because component will be created dynamically.

app.module.ts:

1    import { NgModule} from '@angular/core';
2    import { CommonModule } from "@angular/common";
3    import { BrowserModule } from '@angular/platform-browser';
4    import { BootstrapModalModule } from 'ng2-bootstrap-modal';
5    import { ConfirmComponent } from './confirm.component';
6    import { AppComponent } from './app.component';
7    @NgModule({
8      declarations: [
9        AppComponent,
10        ConfirmComponent
11      ],
12      imports: [
13        CommonModule,
14        BrowserModule,
15        BootstrapModalModule
16      ],
17      //Don't forget to add the component to entryComponents section
18      entryComponents: [
19        ConfirmComponent
20      ],
21      bootstrap: [AppComponent]
22    })
23    export class AppModule {}

###Step 4. Usage

app.component.ts

1    import { Component } from '@angular/core';
2    import { ConfirmComponent } from './confirm.component';
3    import { DialogService } from "ng2-bootstrap-modal";
4    
5    @Component({
6      selector: 'app',
7      template: `
8        <div class="container">
9          <button class="btn btn-default" (click)=showConfirm()>Show confirm</button>
10        </div>
11      `
12    })
13    export class AppComponent {
14        constructor(private dialogService:DialogService) {}
15        showConfirm() {
16            let disposable = this.dialogService.addDialog(ConfirmComponent, {
17                title:'Confirm title', 
18                message:'Confirm message'})
19                .subscribe((isConfirmed)=>{
20                    //We get dialog result
21                    if(isConfirmed) {
22                        alert('accepted');
23                    }
24                    else {
25                        alert('declined');
26                    }
27                });
28            //We can close dialog calling disposable.unsubscribe();
29            //If dialog was not closed manually close it by timeout
30            setTimeout(()=>{
31                disposable.unsubscribe();
32            },10000);
33        }
34    }

##Documentation

###DialogComponent Super class of all modal components. ####Class Overview

1/**
2* Dialog abstract class
3* @template T1 - input dialog data
4* @template T2 - dialog result
5*/
6abstract class DialogComponent<T1, T2> implements T1 {
7    /**
8    * Constructor
9    * @param {DialogService} dialogService - instance of DialogService
10    */
11    constructor(dialogService: DialogService)
12    
13    /**
14    * Dialog result 
15    * @type {T2}
16    */
17    protected result:T2
18    
19    /**
20    * Closes dialog
21    */
22    public close:Function
23}

###DialogOptions

1interface DialogOptions {
2  /**
3  * Dialog index (optional) to set order of modals
4  * @type {number}

5  */
6  index?: number;
7 
8  /**
9  * Timestamp to close dialog automatically after timeout (in msec)
10  * @type {number}

11  */
12  autoCloseTimeout?: number;
13  
14  /**
15  * Flag to close dialog by click on backdrop (outside dialog)
16  * @type {boolean}

17  */
18  closeByClickingOutside?: boolean;
19  
20  /**
21   * Custom backdrop color
22   * Default backdrop color you can set via css (.modal {backgroundColor:...})
23   * @type {string}

24   */
25  backdropColor?: string;
26}

###DialogService Service to show dialogs

###Class Overview

1class DialogService {
2    /**
3    * Adds dialog
4    * @param {Type<DialogComponent<T1, T2>} component - Modal dialog component
5    * @param {T1?} data - Initialization data for component (optional) to add to component instance and can be used in component code or template 
6    * @param {DialogOptions?} Dialog options
7    * @return {Observable<T2>} - returns Observable to get dialog result
8    */
9    public addDialog<T1, T2>(component:Type<DialogComponent<T1, T2>>, data?:T1, options: DialogOptions): Observable<T2> => {}
10}