Bugfix: Body is not updated when bodyOutputType is TrustedHtml

src/sanitize-html.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+    name: 'sanitizeHtml',
+    pure: true
+})
+export class SanitizeHtmlPipe implements PipeTransform {
+    constructor(private sanitizer: DomSanitizer) {
+    }
+
+    transform(content: any): SafeHtml {
+        return this.sanitizer.bypassSecurityTrustHtml(content);
+    }
+}

src/toast.component.ts

@@ -1,9 +1,9 @@
-import {Component, Input, Output, ViewChild, ViewContainerRef, EventEmitter,
-    ComponentFactoryResolver, ChangeDetectorRef, OnInit, AfterViewInit
+import {
+    Component, Input, Output, ViewChild, ViewContainerRef, EventEmitter,
+    ComponentFactoryResolver, ChangeDetectorRef, AfterViewInit
 } from '@angular/core';
-import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
-import {Toast} from './toast';
-import {BodyOutputType} from './bodyOutputType';
+import { Toast } from './toast';
+import { BodyOutputType } from './bodyOutputType';
 
 @Component({
     selector: '[toastComp]',
@@ -13,45 +13,32 @@ import {BodyOutputType} from './bodyOutputType';
             <div [ngClass]="titleClass">{{toast.title}}</div>
             <div [ngClass]="messageClass" [ngSwitch]="toast.bodyOutputType">
                 <div *ngSwitchCase="bodyOutputType.Component" #componentBody></div>
-                <div *ngSwitchCase="bodyOutputType.TrustedHtml" [innerHTML]="safeBodyHtml"></div>
+                <div *ngSwitchCase="bodyOutputType.TrustedHtml" [innerHTML]="toast.body | sanitizeHtml"></div>
                 <div *ngSwitchCase="bodyOutputType.Default">{{toast.body}}</div>
             </div>
         </div>
         <div class="toast-close-button" *ngIf="toast.showCloseButton" (click)="click($event, toast)"
-            [innerHTML]="safeCloseHtml">
+            [innerHTML]="toast.closeHtml | sanitizeHtml">
         </div>`
 })
 
-export class ToastComponent implements OnInit, AfterViewInit {
+export class ToastComponent implements AfterViewInit {
 
     @Input() toast: Toast;
     @Input() iconClass: string;
     @Input() titleClass: string;
     @Input() messageClass: string;
     @ViewChild('componentBody', { read: ViewContainerRef }) componentBody: ViewContainerRef;
 
-    safeCloseHtml: SafeHtml;
-    safeBodyHtml: SafeHtml;
-
     public bodyOutputType = BodyOutputType;
 
     @Output()
     public clickEvent = new EventEmitter();
 
     constructor(
-      private sanitizer: DomSanitizer,
-      private componentFactoryResolver: ComponentFactoryResolver,
-      private changeDetectorRef: ChangeDetectorRef
-    ) {}
-
-    ngOnInit() {
-        if (this.toast.closeHtml) {
-            this.safeCloseHtml = this.sanitizer.bypassSecurityTrustHtml(this.toast.closeHtml);
-        }
-        if (this.toast.bodyOutputType === BodyOutputType.TrustedHtml) {
-            this.safeBodyHtml = this.sanitizer.bypassSecurityTrustHtml(this.toast.body);
-        }
-    }
+        private componentFactoryResolver: ComponentFactoryResolver,
+        private changeDetectorRef: ChangeDetectorRef
+    ) { }
 
     ngAfterViewInit() {
         if (this.toast.bodyOutputType === this.bodyOutputType.Component) {
@@ -65,7 +52,7 @@ export class ToastComponent implements OnInit, AfterViewInit {
     click(event: MouseEvent, toast: Toast) {
         event.stopPropagation();
         this.clickEvent.emit({
-            value : { toast: toast, isCloseButton: true}
+            value: { toast: toast, isCloseButton: true }
         });
     }
 }

src/toaster.module.ts

@@ -3,12 +3,14 @@ import { CommonModule } from '@angular/common';
 import { ToastComponent } from './toast.component';
 import { ToasterContainerComponent } from './toaster-container.component';
 import { ToasterService } from './toaster.service';
+import { SanitizeHtmlPipe } from './sanitize-html.pipe';
 
 @NgModule({
     imports: [CommonModule],
     declarations: [
         ToastComponent,
-        ToasterContainerComponent
+        ToasterContainerComponent,
+        SanitizeHtmlPipe
     ],
     exports: [
         ToasterContainerComponent,
@@ -29,4 +31,4 @@ export class ToasterModule {
             providers: [ToasterContainerComponent]
         }
     }
- }
+}