initial commit

.gitignore

+# Node Files #
+/node_modules/
+npm-debug.log
+
+# IDE #
+.idea/
+

README.md

+#Angular2 Bootstrap Modal Service
+

index.ts

+export {BootstrapModalModule} from './src/bootstrap-modal.module'
+export {DialogComponent} from './src/dialog.component'
+export {DialogService} from './src/dialog.service'
\ No newline at end of file

package.json

+{
+  "name": "ng2-bootstrap-modal",
+  "version": "0.0.1",
+  "description": "Library to simplify the work with bootstrap modal dialogs",
+  "main": "index.ts",
+  "scripts": {
+    "test": "npm test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ankosoftware/ng2-bootstrap-modal.git"
+  },
+  "keywords": [
+    "angular2",
+    "bootstrap",
+    "dialog",
+    "modal"
+  ],
+  "author": "Alexandr Vovchuk <a.vovchuk@gmail.com> (bikalay)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ankosoftware/ng2-bootstrap-modal/issues"
+  },
+  "homepage": "https://github.com/ankosoftware/ng2-bootstrap-modal#readme",
+  "dependencies": {
+    "@angular/common": "2.4.4",
+    "@angular/core": "2.4.4",
+    "rxjs": "5.0.3",
+    "zone.js": "0.7.6"
+  }
+}

src/bootstrap-modal.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from "@angular/common";
+import { DialogHolderComponent } from "./dialog-holder.component";
+import { DialogWrapperComponent } from "./dialog-wrapper.component";
+import { DialogService } from "./dialog.service";
+
+@NgModule({
+    declarations: [
+        DialogHolderComponent,
+        DialogWrapperComponent
+    ],
+    providers: [
+        DialogService
+    ],
+    imports: [
+        CommonModule
+    ],
+    entryComponents: [
+        DialogHolderComponent,
+        DialogWrapperComponent
+    ]
+})
+export class BootstrapModalModule {}

src/dialog-holder.component.ts

+import {
+  Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, ReflectiveInjector,
+  Type
+} from "@angular/core";
+import {DialogComponent} from "./dialog.component";
+import {DialogWrapperComponent} from "./dialog-wrapper.component";
+
+@Component({
+  selector: 'dialog-holder',
+  template: '<template #element></template>',
+})
+export class DialogHolderComponent {
+
+  @ViewChild('element', {read: ViewContainerRef}) private element: ViewContainerRef;
+
+  dialogs: Array<any> = [];
+
+  constructor(private resolver: ComponentFactoryResolver) {
+
+  }
+
+  addDialog(component:Type<DialogComponent>, data?:any, index?:number) {
+    let factory = this.resolver.resolveComponentFactory(DialogWrapperComponent);
+    let componentRef = this.element.createComponent(factory, index);
+    let dialogWrapper: DialogWrapperComponent = <DialogWrapperComponent> componentRef.instance;
+    let _component: DialogComponent =  dialogWrapper.addComponent(component);
+    if(typeof(index) !== 'undefined') {
+      this.dialogs.splice(index, 0, _component);
+    }
+    else {
+      this.dialogs.push(_component);
+    }
+    setTimeout(()=>{
+      dialogWrapper.show();
+    });
+    return _component.fillData(data);
+  }
+
+  removeDialog(component:DialogComponent) {
+    component.wrapper.hide();
+    setTimeout(()=>{
+      let index = this.dialogs.indexOf(component);
+      if(index>-1) {
+        this.element.remove(index);
+        this.dialogs.splice(index, 1);
+      }
+    }, 500);
+  }
+}

src/dialog-wrapper.component.ts

+import {
+  Component, ViewContainerRef, ViewChild, ComponentFactoryResolver, ReflectiveInjector
+} from '@angular/core';
+import {DialogComponent} from "./dialog.component";
+
+@Component({
+  selector: 'dialog-wrapper',
+  template: `
+  <div class="modal fade" [ngClass]="{'in':shown}" style="display:block !important;" role="dialog">
+    <div class="modal-dialog">
+      <template #element></template>
+    </div>
+  </div>
+  `
+})
+export class DialogWrapperComponent {
+  @ViewChild('element', {read: ViewContainerRef}) private element: ViewContainerRef;
+  private shown:boolean = false;
+  private content: DialogComponent;
+
+  constructor(private resolver: ComponentFactoryResolver) {}
+
+  addComponent(component) {
+    let factory = this.resolver.resolveComponentFactory(component);
+    let injector = ReflectiveInjector.fromResolvedProviders([], this.element.injector);
+    let componentRef = factory.create(injector);
+    this.element.insert(componentRef.hostView);
+    this.content =  <DialogComponent>componentRef.instance;
+    this.content.wrapper = this;
+    return this.content;
+  }
+
+  show() {
+    this.shown = true;
+  }
+  hide() {
+    this.shown = false;
+  }
+}
+
+

src/dialog.component.ts

+import {
+  Component, OnDestroy
+} from '@angular/core';
+import {Observable, Observer} from 'rxjs';
+import {DialogWrapperComponent} from "./dialog-wrapper.component";
+import {DialogService} from "./dialog.service";
+
+@Component({
+  selector: 'pagination'
+})
+export class DialogComponent implements OnDestroy {
+
+  private observer: Observer<any>;
+
+  protected result: any;
+
+  wrapper: DialogWrapperComponent;
+
+  constructor(protected dialogService: DialogService) {}
+
+  fillData(data:any = {}) {
+    let keys = Object.keys(data);
+    for(let i=0, length=keys.length; i<length; i++) {
+      let key = keys[i];
+      this[key] = data[key];
+    }
+    return Observable.create((observer)=>{
+      this.observer = observer;
+      return ()=>{
+        this.close();
+      }
+    });
+  }
+
+  close() {
+    this.dialogService.removeDialog(this);
+  }
+
+  ngOnDestroy(): void {
+    this.observer.next(this.result);
+  }
+}

src/dialog.service.ts

+import {
+  Injectable, ComponentFactoryResolver, ApplicationRef, Injector, EmbeddedViewRef, Type
+} from "@angular/core";
+import {DialogHolderComponent} from "./dialog-holder.component";
+import {DialogComponent} from "./dialog.component";
+
+@Injectable()
+export class DialogService  {
+
+  private dialogHolderComponent : DialogHolderComponent;
+
+  constructor(private resolver: ComponentFactoryResolver, private applicationRef: ApplicationRef, private injector: Injector) {
+    this.dialogHolderComponent = this.createDialogHolder();
+  }
+
+  addDialog(component:Type<DialogComponent>, data?:any, index?:number) {
+    return this.dialogHolderComponent.addDialog(component, data, index);
+  }
+  removeDialog(component:DialogComponent) {
+    return this.dialogHolderComponent.removeDialog(component);
+  }
+  private createDialogHolder(): DialogHolderComponent {
+    let componentFactory = this.resolver.resolveComponentFactory(DialogHolderComponent);
+    let componentRef = componentFactory.create(this.injector);
+    let componentRootNode = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+    let componentRootViewConainer = this.applicationRef['_rootComponents'][0];
+    let rootLocation: Element =   (componentRootViewConainer.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+
+    this.applicationRef.attachView(componentRef.hostView);
+
+    componentRef.onDestroy(() => {
+      this.applicationRef.detachView(componentRef.hostView);
+    });
+
+    rootLocation.appendChild(componentRootNode);
+
+    return componentRef.instance;
+  }
+}