Merge pull request #65 from gilhanan/feat(html-content)-innerHTML

feat(html-content): innerHTML property
akserg · Feb 23, 2017 · ee65355 · ee65355
2 parents ff826da + 7a0d53f
commit ee65355
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 5 deletions.
diff --git a/index.ts b/index.ts
@@ -10,6 +10,7 @@ export * from './src/toasty.component';
 
 import { ToastyComponent } from './src/toasty.component';
 import { ToastComponent } from './src/toast.component';
+import { SafeHtmlPipe } from './src/shared';
 import { ToastyService, ToastyConfig, toastyServiceFactory } from './src/toasty.service';
 
 export let providers = [
@@ -19,7 +20,7 @@ export let providers = [
 
 @NgModule({
     imports: [CommonModule],
-    declarations: [ToastComponent, ToastyComponent],
+    declarations: [ToastComponent, ToastyComponent, SafeHtmlPipe],
     exports: [ ToastComponent, ToastyComponent],
     providers: providers
 })

diff --git a/src/shared.ts b/src/shared.ts
@@ -0,0 +1,11 @@
+import { DomSanitizer } from '@angular/platform-browser';
+import { PipeTransform, Pipe } from '@angular/core';
+
+@Pipe({ name: 'safeHtml'})
+export class SafeHtmlPipe implements PipeTransform  {
+    constructor(private domSanitized: DomSanitizer) {}
+
+    transform(value: any, ...args: any[]): any {
+        return this.domSanitized.bypassSecurityTrustHtml(value);
+    }
+}
diff --git a/src/toast.component.ts b/src/toast.component.ts
@@ -15,9 +15,9 @@ import { ToastData } from './toasty.service';
         <div class="toast" [ngClass]="[toast.type, toast.theme]">
             <div *ngIf="toast.showClose" class="close-button" (click)="close($event)"></div>
             <div *ngIf="toast.title || toast.msg" class="toast-text">
-                <span *ngIf="toast.title" class="toast-title">{{toast.title}}</span>
+                <span *ngIf="toast.title" class="toast-title" [innerHTML]="toast.title | safeHtml"></span>
                 <br *ngIf="toast.title && toast.msg" />
-                <span *ngIf="toast.msg" class="toast-msg">{{toast.msg}}</span>
+                <span *ngIf="toast.msg" class="toast-msg" [innerHtml]="toast.msg | safeHtml"></span>
             </div>
         </div>`
 })

diff --git a/tests/toast.component.spec.ts b/tests/toast.component.spec.ts
@@ -3,6 +3,7 @@ import { TestBed, ComponentFixture }
 
 import {ToastData} from '../src/toasty.service';
 import {ToastComponent} from '../src/toast.component';
+import {SafeHtmlPipe} from '../src/shared';
 
 describe('ToastComponent', () => {
 
@@ -23,7 +24,7 @@ describe('ToastComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [ToastComponent]
+            declarations: [ToastComponent, SafeHtmlPipe]
         });
         TestBed.compileComponents();
     });

diff --git a/tests/toasty.component.spec.ts b/tests/toasty.component.spec.ts
@@ -4,6 +4,7 @@ import { TestBed, ComponentFixture }
 import {ToastyService, ToastData, ToastyConfig} from '../src/toasty.service';
 import {ToastyComponent} from '../src/toasty.component';
 import {ToastComponent} from '../src/toast.component';
+import {SafeHtmlPipe} from '../src/shared';
 
 describe('ToastyComponent', () => {
 
@@ -37,7 +38,7 @@ describe('ToastyComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [ToastComponent, ToastyComponent],
+            declarations: [ToastComponent, ToastyComponent, SafeHtmlPipe],
             providers: [ToastyService, ToastyConfig]
         });
         TestBed.compileComponents();

diff --git a/tsconfig.json b/tsconfig.json
@@ -16,6 +16,7 @@
   },
   "files": [
     "index.ts",
+    "./src/shared.ts",
     "./src/toast.component.ts",
     "./src/toasty.component.ts",
     "./src/toasty.service.ts",