Modal finalized

src/app/main.ts

@@ -6,7 +6,7 @@ import { enableProdMode } from '@angular/core';
 import { AppComponent } from './app.component';
 import { APP_ROUTER_PROVIDERS } from './app.routes';
 import { API_HTTP_PROVIDERS } from './app.api-http';
-import { NotificationsService } from './shared/index';
+import { NotificationsService, ModalService } from './shared/index';
 import { Constants } from './shared/constants';
 
 // enableProdMode();
@@ -18,6 +18,7 @@ bootstrap(AppComponent, [
     APP_ROUTER_PROVIDERS,
     API_HTTP_PROVIDERS,
     Constants,
-    NotificationsService
+    NotificationsService,
+    ModalService
 ]);
 

src/app/shared/index.ts

@@ -3,5 +3,5 @@ export * from './auth/index';
 export * from './models/index';
 export * from './notifications/index';
 export * from './constants';
-export * from './modal/modal.component'
+export * from './modal/index'
 

src/app/shared/modal/index.ts

@@ -0,0 +1,3 @@
+export * from './modal.component';
+export * from './modal.service';
+

src/app/shared/modal/modal.component.html

@@ -2,7 +2,7 @@
     <div class="modal-overlay" (click)="close(true)"></div>
 
     <div class="modal">
-        <div class="title">
+        <div class="title" *ngIf="modalTitle">
             <h2>
                 {{ modalTitle }}
                 <span class="right" (click)="close()">

src/app/shared/modal/modal.component.ts

@@ -1,37 +1,36 @@
 import {
     Component,
     Input,
-    Output,
-    EventEmitter
+    OnInit
 } from '@angular/core';
 
+import { ModalService } from './modal.service';
+
 @Component({
     selector: 'tb-modal',
     templateUrl: 'app/shared/modal/modal.component.html',
     host: { '(document:keyup)': 'keyup($event)' }
 })
-export class Modal {
+export class Modal implements OnInit {
+    @Input('modal-id') modalId: string;
     @Input('modal-title') modalTitle: string;
     @Input() blocking = false;
-    @Input('is-open') isOpen = false;
-    @Output() onClose = new EventEmitter<boolean>();
+    isOpen: boolean = false;
 
-    open() {
-        this.isOpen = true;
+    constructor(private modalService: ModalService) {
     }
 
-    close(checkBlocking = false) {
-        if (checkBlocking && this.blocking) {
-            return;
+    ngOnInit() {
+        this.modalService.registerModal(this);
     }
 
-        this.isOpen = false;
-        this.onClose.next(false);
+    private close(checkBlocking = false): void {
+        this.modalService.close(this.modalId, checkBlocking);
     }
 
-    keyup(event: KeyboardEvent) {
+    private keyup(event: KeyboardEvent): void {
         if (event.keyCode === 27) {
-            this.close(true);
+            this.modalService.close(this.modalId, true);
         }
     }
 }

src/app/shared/modal/modal.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+
+import { Modal } from './modal.component';
+
+@Injectable()
+export class ModalService {
+    private modals: Array<Modal>;
+
+    constructor() {
+        this.modals = [];
+    }
+
+    registerModal(newModal: Modal): void {
+        var modal = this.findModal(newModal.modalId);
+
+        if (modal) {
+            return;
+        }
+
+        this.modals.push(newModal);
+    }
+
+    open(modalId: string): void {
+        var modal = this.findModal(modalId);
+
+        if (modal) {
+            modal.isOpen = true;
+        }
+    }
+
+    close(modalId: string, checkBlocking = false): void {
+        var modal = this.findModal(modalId);
+
+        if (modal) {
+            if (checkBlocking && modal.blocking) {
+                return;
+            }
+
+            modal.isOpen = false;
+        }
+    }
+
+    private findModal(modalId: string): Modal {
+        for (var modal of this.modals) {
+            if (modal.modalId === modalId) {
+                return modal;
+            }
+        }
+
+        return null;
+    }
+}
+