turned the html field in to a boolean

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

@@ -9,7 +9,7 @@ export interface INotification {
   title?: Observable<string> | string;
   content?: Observable<string> | string;
   options?: INotificationOptions;
-  html?: any;
+  html?: boolean;
 }
 
 export class Notification implements INotification {
@@ -18,14 +18,14 @@ export class Notification implements INotification {
   public title: Observable<string> | string;
   public content: Observable<string> | string;
   public options: INotificationOptions;
-  public html: any;
+  public html: boolean;
 
   constructor(id: string,
               type: NotificationType,
               title?: Observable<string> | string,
               content?: Observable<string> | string,
               options?: NotificationOptions,
-              html?: any) {
+              html?: boolean) {
 
     this.id = id;
     this.type = type;

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

@@ -1,11 +1,11 @@
-<div class="alert {{item.type}} alert-dismissible p-3" role="alert"
+<div class="alert {{notification.type}} alert-dismissible p-3" role="alert"
      [@enterLeave]="animate">
 
   <div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">
     <span [ngStyle]="{'width': progressWidth + '%'}" class="h-100 float-left"></span>
   </div>
 
-    <button *ngIf="item.options.clickToClose"
+    <button *ngIf="notification.options.clickToClose"
             (click)="remove()"
             type="button" class="close pt-0 pr-1 pl-0 pb-0" data-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
@@ -16,10 +16,10 @@
     <div class="d-flex flex-column justify-content-center align-items-center">
       <div class="notification-icon d-flex justify-content-center"><i
         [ngClass]="{'fa fa-2x': true,
-      'fa-check': item.type == 'alert-success',
-      'fa-times-circle': item.type == 'alert-danger',
-      'fa-exclamation-triangle': item.type == 'alert-warning',
-      'fa-info': item.type == 'alert-info'
+      'fa-check': notification.type == 'alert-success',
+      'fa-times-circle': notification.type == 'alert-danger',
+      'fa-exclamation-triangle': notification.type == 'alert-warning',
+      'fa-info': notification.type == 'alert-info'
       }"></i></div>
     </div>
     <div class="d-flex flex-column justify-content-center align-content-stretch">
@@ -34,7 +34,7 @@
         </strong>
       </div>
 
-      <div class="p-2 mr-3"  *ngIf="content">
+      <div class="p-2 mr-3"  *ngIf="content && !html">
         <div class="notification-content pl-1" *ngIf="contentIsTemplate; else regularContent">
           <ng-container *ngTemplateOutlet="content"></ng-container>
         </div>
@@ -43,12 +43,12 @@
         </ng-template>
       </div>
 
-      <div class="p-2 mr-3" *ngIf="item.html">
-        <div class="notification-html pl-1" *ngIf="htmlIsTemplate; else regularHtml">
-          <ng-container *ngTemplateOutlet="html"></ng-container>
+      <div class="p-2 mr-3" *ngIf="content && html">
+        <div class="notification-html pl-1" *ngIf="contentIsTemplate; else regularHtml">
+          <ng-container *ngTemplateOutlet="content"></ng-container>
         </div>
         <ng-template #regularHtml>
-          <div class="notification-html pl-1" [innerHTML]="html"></div>
+          <div class="notification-html pl-1" [innerHTML]="content"></div>
         </ng-template>
       </div>
     </div>

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

@@ -60,7 +60,7 @@ describe('NotificationComponent', () => {
   beforeEach(()  => {
     fixture = TestBed.createComponent(NotificationComponent);
     comp = fixture.componentInstance;
-    comp.item = {
+    comp.notification = {
       id: '1',
       type: NotificationType.Info,
       title: 'Notif. title',
@@ -83,12 +83,12 @@ describe('NotificationComponent', () => {
 
   it('should set Title', () => {
     fixture.detectChanges();
-    expect(elTitle.textContent).toBe(comp.item.title as string);
+    expect(elTitle.textContent).toBe(comp.notification.title as string);
   });
 
   it('should set Content', () => {
     fixture.detectChanges();
-    expect(elContent.textContent).toBe(comp.item.content as string);
+    expect(elContent.textContent).toBe(comp.notification.content as string);
   });
 
   it('should set type', () => {
@@ -96,4 +96,24 @@ describe('NotificationComponent', () => {
     expect(elType).toBeDefined();
   });
 
+  it('shuld has html content', () => {
+    fixture = TestBed.createComponent(NotificationComponent);
+    comp = fixture.componentInstance;
+    const htmlContent = `<a class="btn btn-link p-0 m-0 pb-1" href="/test"><strong>test</strong></a>`
+    comp.notification = {
+      id: '1',
+      type: NotificationType.Info,
+      title: 'Notif. title',
+      content: htmlContent,
+      options: new NotificationOptions(),
+      html: true
+    };
+
+    fixture.detectChanges();
+
+    deContent = fixture.debugElement.query(By.css('.notification-html'));
+    elContent = deContent.nativeElement;
+    expect(elContent.innerHTML).toEqual(htmlContent);
+  })
+
 });

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

@@ -45,7 +45,7 @@ import { isNotEmpty } from '../../empty.util';
 
 export class NotificationComponent implements OnInit, OnDestroy {
 
-  @Input() public item: INotification;
+  @Input() public notification: INotification;
 
   // Progress bar variables
   public title: Observable<string>;
@@ -74,21 +74,20 @@ export class NotificationComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.animate = this.item.options.animate + NotificationAnimationsStatus.In;
+    this.animate = this.notification.options.animate + NotificationAnimationsStatus.In;
 
-    if (this.item.options.timeOut !== 0) {
+    if (this.notification.options.timeOut !== 0) {
       this.startTimeOut();
       this.showProgressBar = true;
     }
-
-    this.contentType(this.item.title, 'title');
-    this.contentType(this.item.content, 'content');
-    this.contentType(this.item.html, 'html');
+    this.html = this.notification.html;
+    this.contentType(this.notification.title, 'title');
+    this.contentType(this.notification.content, 'content');
   }
 
   private startTimeOut(): void {
-    this.steps = this.item.options.timeOut / 10;
-    this.speed = this.item.options.timeOut / this.steps;
+    this.steps = this.notification.options.timeOut / 10;
+    this.speed = this.notification.options.timeOut / this.steps;
     this.start = new Date().getTime();
     this.zone.runOutsideAngular(() => this.timer = setTimeout(this.instance, this.speed));
   }
@@ -117,17 +116,17 @@ export class NotificationComponent implements OnInit, OnDestroy {
     if (this.animate) {
       this.setAnimationOut();
       setTimeout(() => {
-        this.notificationService.remove(this.item);
+        this.notificationService.remove(this.notification);
       }, 1000);
     } else {
-      this.notificationService.remove(this.item);
+      this.notificationService.remove(this.notification);
     }
   }
 
   private contentType(item: any, key: string) {
     if (item instanceof TemplateRef) {
       this[key] = item;
-    } else if (key === 'title' || key === 'content') {
+    } else if (key === 'title' || (key === 'content' && !this.html)) {
       let value = null;
       if (isNotEmpty(item)) {
         if (typeof item === 'string') {
@@ -150,7 +149,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
   }
 
   private setAnimationOut() {
-    this.animate = this.item.options.animate + NotificationAnimationsStatus.Out;
+    this.animate = this.notification.options.animate + NotificationAnimationsStatus.Out;
     this.cdr.detectChanges();
   }
 }

src/app/shared/notifications/notifications-board/notifications-board.component.html

@@ -1,6 +1,6 @@
 <div class="notifications-wrapper position-fixed" [ngClass]="position">
   <ds-notification
     *ngFor="let a of notifications; let i = index"
-    [item]="a">
+    [notification]="a">
   </ds-notification>
 </div>

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

@@ -24,7 +24,7 @@ export class NotificationsService {
   success(title: any = Observable.of(''),
           content: any = Observable.of(''),
           options: NotificationOptions = this.getDefaultOptions(),
-          html?: any): INotification {
+          html: boolean = false): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Success, title, content, options, html);
     this.add(notification);
     return notification;
@@ -33,7 +33,7 @@ export class NotificationsService {
   error(title: any = Observable.of(''),
         content: any = Observable.of(''),
         options: NotificationOptions = this.getDefaultOptions(),
-        html?: any): INotification {
+        html: boolean = false): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Error, title, content, options, html);
     this.add(notification);
     return notification;
@@ -42,7 +42,7 @@ export class NotificationsService {
   info(title: any = Observable.of(''),
        content: any = Observable.of(''),
        options: NotificationOptions = this.getDefaultOptions(),
-       html?: any): INotification {
+       html: boolean = false): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Info, title, content, options, html);
     this.add(notification);
     return notification;
@@ -51,7 +51,7 @@ export class NotificationsService {
   warning(title: any = Observable.of(''),
           content: any = Observable.of(''),
           options: NotificationOptions = this.getDefaultOptions(),
-          html?: any): INotification {
+          html: boolean = false): INotification {
     const notification = new Notification(uniqueId(), NotificationType.Warning, title, content, options, html);
     this.add(notification);
     return notification;