Merge pull request #279 from cal-smith/notification

fix(notification): added NotificationDisplayService

Author: cal-smith

src/notification/notification-display.service.ts

@@ -0,0 +1,19 @@
+import {
+	Injectable,
+	ApplicationRef
+} from "@angular/core";
+
+@Injectable()
+export class NotificationDisplayService {
+	constructor(protected applicationRef: ApplicationRef) {}
+
+	/**
+	 * Programatically closes notification based on `notificationRef`.	 *
+	 */
+	close(notificationRef: any) {
+		setTimeout(() => {
+			this.applicationRef.detachView(notificationRef.hostView);
+			notificationRef.destroy();
+		}, 200);
+	}
+}

src/notification/notification.component.spec.ts

@@ -2,15 +2,15 @@ import { TestBed } from "@angular/core/testing";
 
 import { StaticIconModule } from "./../icon/static-icon.module";
 
-import { Notification, NotificationService } from "./notification.module";
+import { Notification, NotificationService, NotificationDisplayService } from "./notification.module";
 import { I18nModule } from "../i18n/i18n.module";
 
 
 describe("Notification", () => {
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			declarations: [Notification],
-			providers: [NotificationService],
+			providers: [NotificationDisplayService],
 			imports: [
 				StaticIconModule,
 				I18nModule

src/notification/notification.component.ts

@@ -8,9 +8,9 @@ import {
 	HostBinding
 } from "@angular/core";
 
-import { NotificationService } from "./notification.service";
 import { NotificationContent } from "./notification-content.interface";
 import { I18n } from "./../i18n/i18n.module";
+import { NotificationDisplayService } from "./notification-display.service";
 
 /**
  * Notification messages are displayed toward the top of the UI and do not interrupt user’s work.
@@ -44,8 +44,7 @@ import { I18n } from "./../i18n/i18n.module";
 				<path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z" fill-rule="nonzero"/>
 			</svg>
 		</button>
-	`,
-	providers: [NotificationService]
+	`
 })
 export class Notification {
 	/**
@@ -92,7 +91,7 @@ export class Notification {
 	};
 	protected _notificationObj: NotificationContent = Object.assign({}, this.defaultNotificationObj);
 
-	constructor(protected notificationService: NotificationService, protected i18n: I18n) {}
+	constructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {}
 
 	/**
 	 * Emits close event.
@@ -104,6 +103,6 @@ export class Notification {
 	}
 
 	destroy() {
-		this.notificationService.close(this);
+		this.notificationDisplayService.close(this);
 	}
 }

src/notification/notification.module.ts

@@ -6,9 +6,11 @@ import { StaticIconModule } from "./../icon/static-icon.module";
 import { Toast } from "./toast.component";
 import { Notification } from "./notification.component";
 import { NotificationService } from "./notification.service";
+import { NotificationDisplayService } from "./notification-display.service";
 import { I18nModule } from "./../i18n/i18n.module";
 
 export { NotificationService } from "./notification.service";
+export { NotificationDisplayService } from "./notification-display.service";
 export { Notification } from "./notification.component";
 export { Toast } from "./toast.component";
 
@@ -23,6 +25,6 @@ export { Toast } from "./toast.component";
 	],
 	entryComponents: [Notification, Toast],
 	imports: [CommonModule, StaticIconModule, I18nModule],
-	providers: [NotificationService]
+	providers: [NotificationService, NotificationDisplayService]
 })
 export class NotificationModule {}

src/notification/notification.service.ts

@@ -10,7 +10,8 @@ import {
 } from "@angular/core";
 
 import { NotificationContent, ToastContent } from "./notification-content.interface";
-import { Notification, Toast } from "./notification.module";
+import { Notification } from "./notification.component";
+import { Toast } from "./toast.component";
 
 /**
  * Provides a way to use the notification component.

src/notification/toast.component.ts

@@ -5,7 +5,6 @@ import {
 	HostBinding
 } from "@angular/core";
 
-import { NotificationService } from "./notification.service";
 import { NotificationContent, ToastContent } from "./notification-content.interface";
 import { Notification } from "./notification.component";
 
@@ -37,8 +36,7 @@ import { Notification } from "./notification.component";
 				<path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z" fill-rule="nonzero"/>
 			</svg>
 		</button>
-	`,
-	providers: [ NotificationService ]
+	`
 })
 export class Toast extends Notification implements OnInit {
 	/**