2 files changed, 61 insertions, 0 deletions
diff --git a/src/angular/notifications/notification/notification.component.html.ts b/src/angular/notifications/notification/notification.component.html.ts
new file mode 100644
index 0000000..450972e
--- /dev/null
+++ b/src/angular/notifications/notification/notification.component.html.ts
@@ -0,0 +1,19 @@
+export default `
+<div class="sdc-notification" (click)="fadeOut()">
+    <div class="sdc-notification__wrapper {{'type-' + notificationSetting.type}}" [class.fade-out__animated]="fade" (animationend)="destroyMe()">
+        <div *ngIf="!notificationSetting.hasCustomContent" class="sdc-notification__content">
+            <div class="sdc-notification__icon" >
+            </div>
+            <div class="sdc-notification__message">
+                <div class="sdc-notification__title">
+                    {{notificationSetting.notifyTitle}}
+                </div>
+                <div class="sdc-notification__text" >
+                    {{notificationSetting.notifyText}}
+                </div>
+            </div>
+        </div>
+        <div #dynamicContentContainer></div>
+    </div>
+</div>
+`;
diff --git a/src/angular/notifications/notification/notification.component.ts b/src/angular/notifications/notification/notification.component.ts
new file mode 100644
index 0000000..476853c
--- /dev/null
+++ b/src/angular/notifications/notification/notification.component.ts
@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter, OnInit, ViewContainerRef, ViewChild } from "@angular/core";
+import { NotificationSettings } from "../utilities/notification.config";
+import { CreateDynamicComponentService } from "../../utils/create-dynamic-component.service";
+import template from "./notification.component.html";
+
+@Component({
+    selector: 'sdc-notification',
+    template: template
+})
+
+export class NotificationComponent implements OnInit {
+
+    @Input() notificationSetting:NotificationSettings;
+    @Output() destroyComponent = new EventEmitter<any>();
+    @ViewChild("dynamicContentContainer", {read: ViewContainerRef}) contentContainer:ViewContainerRef;
+    private fade: boolean = false;
+
+    constructor(private createDynamicComponentService: CreateDynamicComponentService) {
+    }
+
+    public ngOnInit() {
+        if(this.notificationSetting.hasCustomContent){
+            this.createDynamicComponentService.insertComponentDynamically(this.notificationSetting.innerComponentType, this.notificationSetting.innerComponentOptions, this.contentContainer);
+        }
+
+        if(!this.notificationSetting.sticky){
+            setTimeout(() => this.fadeOut(), this.notificationSetting.duration);
+        }
+    }
+
+    private fadeOut = ():void => {
+        this.fade = true;
+    }
+
+    private destroyMe() {
+        /*Only destroy on fade out, not on entry animation */
+        if(this.fade){
+            this.destroyComponent.emit(this.notificationSetting);
+        }
+    }
+
+}