Take notification title and content as Observable

src/app/shared/notifications/models/notification.model.ts

@@ -1,32 +1,29 @@
 import { INotificationOptions, NotificationOptions } from './notification-options.model';
 import { NotificationType } from './notification-type';
 import { isEmpty } from '../../empty.util';
-import { ElementRef, TemplateRef } from '@angular/core';
-import { Deserialize, Serialize, serialize } from 'cerialize';
-import { deserialize } from 'cerialize';
-import { NotificationsService } from '../notifications.service';
+import { Observable } from 'rxjs/Observable';
 
 export interface INotification {
-  id: string
-  type: NotificationType
-  title?: any
-  content?: any
-  options?: INotificationOptions
+  id: string;
+  type: NotificationType;
+  title?: Observable<string>;
+  content?: Observable<string>;
+  options?: INotificationOptions;
   html?: any;
 }
 
 export class Notification implements INotification {
   public id: string;
   public type: NotificationType;
-  public title: any;
-  public content: any;
+  public title: Observable<string>;
+  public content: Observable<string>;
   public options: INotificationOptions;
   public html: any;
 
   constructor(id: string,
               type: NotificationType,
-              title?: any,
-              content?: any,
+              title?: Observable<string>,
+              content?: Observable<string>,
               options?: NotificationOptions,
               html?: any) {
 
@@ -38,13 +35,4 @@ export class Notification implements INotification {
     this.html = html;
   }
 
-  // get html() {
-    // if (this.title === '' && this.content === '') {
-    //   return NotificationsService.htmlArray.get(this.id);
-    // } else {
-    //   return null;
-    // }
-  // }
-
-
 }

src/app/shared/notifications/notification/notification.component.html

@@ -22,7 +22,7 @@
     </div>
 
     <ng-template #regularTitle>
-      <div class="sn-title" [innerHTML]="title"></div>
+      <div class="sn-title" [innerHTML]="(title | async)"></div>
     </ng-template>
 
     <div class="sn-content" *ngIf="contentIsTemplate; else regularContent">
@@ -30,7 +30,7 @@
     </div>
 
     <ng-template #regularContent>
-      <div class="sn-content" [innerHTML]="content"></div>
+      <div class="sn-content" [innerHTML]="(content | async)"></div>
     </ng-template>
 
   </div>

src/app/shared/notifications/notification/notification.component.ts

@@ -21,6 +21,7 @@ import { fromLeftEnter, fromLeftInState, fromLeftLeave, fromLeftOutState } from
 import { fromTopEnter, fromTopInState, fromTopLeave, fromTopOutState } from '../../animations/fromTop';
 import { fadeInEnter, fadeInState, fadeOutLeave, fadeOutState } from '../../animations/fade';
 import { NotificationAnimationsStatus } from '../models/notification-animations-type';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'ds-notification',
@@ -46,8 +47,8 @@ export class NotificationComponent implements OnInit, OnDestroy {
   @Input() public item: INotification;
 
   // Progress bar variables
-  public title: any;
-  public content: any;
+  public title: Observable<string>;
+  public content: Observable<string>;
   public html: any;
   public showProgressBar = false;
   public titleIsTemplate = false;
@@ -125,6 +126,8 @@ export class NotificationComponent implements OnInit, OnDestroy {
   private contentType(item: any, key: string) {
     if (item instanceof TemplateRef) {
       this[key] = item;
+    } else if (item instanceof Observable) {
+      this[key] = item;
     } else {
       this[key] = this.domSanitizer.bypassSecurityTrustHtml(item);
     }

src/app/shared/notifications/notifications.service.ts

@@ -11,6 +11,7 @@ import {
   RemoveNotificationAction
 } from './notifications.actions';
 import { DomSanitizer } from '@angular/platform-browser';
+import { Observable } from 'rxjs/Observable';
 
 @Injectable()
 export class NotificationsService {
@@ -28,25 +29,37 @@ export class NotificationsService {
     this.store.dispatch(notificationAction);
   }
 
-  success(title: any = '', content: any = '',  options = new NotificationOptions(), html?: any): INotification {
+  success(title: any = Observable.of(''),
+          content: any = Observable.of(''),
+          options = new NotificationOptions(),
+          html?: any): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Success, title, content, options, html);
     this.add(notification);
     return notification;
   }
 
-  error(title: any = '', content: any = '',  options = new NotificationOptions(), html?: any): INotification {
+  error(title: any = Observable.of(''),
+        content: any = Observable.of(''),
+        options = new NotificationOptions(),
+        html?: any): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Error, title, content, options, html);
     this.add(notification);
     return notification;
   }
 
-  info(title: any = '', content: any = '', options = new NotificationOptions(), html?: any): INotification {
+  info(title: any = Observable.of(''),
+       content: any = Observable.of(''),
+       options = new NotificationOptions(),
+       html?: any): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Info, title, content, options, html);
     this.add(notification);
     return notification;
   }
 
-  warning(title: any = '', content: any = '', options = new NotificationOptions(), html?: any): INotification {
+  warning(title: any = Observable.of(''),
+          content: any = Observable.of(''),
+          options = new NotificationOptions(),
+          html?: any): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Warning, title, content, options, html);
     this.add(notification);
     return notification;