fix(toast.component):TrustedHtml properly renders

The BodyOutputType.TrustedHtml option was trying to improperly render
the toast.html property of the toast.  This has been updated to render
the body property as the inner html of the new toast instance and
addresses #24.

Body Output Type documentation added to the README.

CHANGELOG.md

@@ -1,7 +1,18 @@
+# 0.3.3-rc.1 (2016-05-31)
+
+### Bug Fixes
+* **toast.component.ts:** The `BodyOutputType.TrustedHtml` option was trying to improperly render 
+the `toast.html` property of the toast.  This has been updated to render the body property as the 
+inner html of the new toast instance and addresses [#24](https://github.com/Stabzs/Angular2-Toaster/issues/24).
+
+### Documentation
+* **README:** Body Output Type documentation added to the README.
+
+
 # 0.3.2-rc.1 (2016-05-22
 
 ### Bug Fixes
-* **toaster.container.component.ts:** if `toast.timeout` property is set to 0, the toast instance 
+* **toaster.container.component.ts:** If `toast.timeout` property is set to 0, the toast instance 
 will correctly be "sticky". If the `toast.timeout` is undefined, the timeout property assignment 
 will continue to correctly fallback to the `toasterconfig.timeout` property.
 Closes [#23](https://github.com/Stabzs/Angular2-Toaster/issues/23).

README.md

@@ -4,9 +4,9 @@
 largely based off of [AngularJS-Toaster](https://github.com/jirikavi/AngularJS-Toaster).
 
 [![Build Status](https://travis-ci.org/Stabzs/Angular2-Toaster.svg?branch=master)](https://travis-ci.org/Stabzs/Angular2-Toaster)
-[![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master&bust=0.3.2)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master)
+[![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master&busted=0.3.3)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master)
 
-### Current Version 0.3.2-rc.1
+### Current Version 0.3.3-rc.1
 
 ## Installation:
 
@@ -302,6 +302,49 @@ If a type is not defined and specified, a timeout will not be applied, making th
   this.toasterService.pop(toast);
   ```
 
+### Body Output Type
+There are three different types of body renderings that can be passed via the 
+`toast.bodyOutputType` argument: 'Default', 'TrustedHtml', and 'Component'. If a `bodyOutputType` 
+is not provided, it will be defaulted to 'Default'.
+
+* Default: The `body` argument will be directly interpolated as text content.  If html is passed 
+ in the `body` argument, it will be encoded and rendered as text.
+ 
+* TrustedHtml: The `body` argument will be parsed and rendered as html content.
+  ```typescript
+  import {BodyOutputType} from 'angular2-toaster/angular2-toaster';
+  var toast : Toast = {
+      type: 'error',
+      title: 'Title text',
+      body: '<h4>Body text</h4>',
+      bodyOutputType: BodyOutputType.TrustedHtml
+  };
+
+  this.toasterService.pop(toast);
+  ```
+
+* Component: The `body` argument is the name of the component class to be rendered as the content 
+of the toast.
+```typescript
+  import {BodyOutputType} from 'angular2-toaster/angular2-toaster';
+
+  @Component({
+    selector: 'dynamic-component',
+    template: `<div>loaded via component</div>`
+  })
+  class DynamicComponent { }
+
+  var toast : Toast = {
+      type: 'error',
+      title: 'Title text',
+      body: DynamicComponent,
+      bodyOutputType: BodyOutputType.Component
+  };
+
+  this.toasterService.pop(toast);
+  ```
+
+
 ### On Show Callback
 An onShow callback function can be attached to each toast instance.  The callback will be invoked upon toast add.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-toaster",
-  "version": "0.3.2-rc.1",
+  "version": "0.3.3-rc.1",
   "description": "An Angular 2 Toaster Notification library based on AngularJS-Toaster",
   "main": "angular2-toaster.ts",
   "scripts": {

src/toast.component.ts

@@ -12,7 +12,7 @@ import {BodyOutputType} from './bodyOutputType';
         <div [ngClass]="toast.toasterConfig.titleClass">{{toast.title}}</div>
         <div [ngClass]="toast.toasterConfig.messageClass" [ngSwitch]="toast.bodyOutputType">
             <div *ngSwitchWhen="bodyOutputType.Component" #componentBody></div> 
-            <div *ngSwitchWhen="bodyOutputType.TrustedHtml" [innerHTML]="toast.html"></div>
+            <div *ngSwitchWhen="bodyOutputType.TrustedHtml" [innerHTML]="toast.body"></div>
             <div *ngSwitchWhen="bodyOutputType.Default">{{toast.body}}</div>
         </div>`,
     outputs: ['clickEvent']

src/toast.ts

@@ -4,21 +4,17 @@ import {ToasterConfig} from './toaster-config';
 export interface Toast {
     type: string;
     title?: string;
-    body?: any; 
-
+    body?: any;
     toastId?: string;
     toastContainerId?: number;
     onShowCallback?: OnActionCallback;
     onHideCallback?: OnActionCallback;
-    data?: Object;
-
     timeout?: number;
     timeoutId?: number;
     bodyOutputType?: BodyOutputType;
     clickHandler?: ClickHandler;
     showCloseButton?: boolean;
     closeHtml?: string;
-
     toasterConfig? : ToasterConfig
 }
 

src/toaster-container.component.spec.ts

@@ -723,6 +723,73 @@ describe('ToasterContainerComponent when included as a component', () => {
             expect(renderedToast.innerHTML).toBe('<div>loaded via component</div>'); 
         }, 1);
     });
+
+    it('addToast should render html passed in toast.body if bodyOutputType is TrustedHtml', () => {
+        let textContent = 'here is test text';
+        let htmlContent = '<h4>' + textContent + '</h4>';
+
+        fixture.detectChanges();
+        var container = fixture.debugElement.children[0].componentInstance;
+        var toast: Toast = {
+            type: 'success',
+            title: 'Yay',
+            body: htmlContent,
+            bodyOutputType: BodyOutputType.TrustedHtml
+        }
+
+        fixture.componentInstance.toasterService.pop(toast);
+        fixture.detectChanges();
+        expect(container.toasts.length).toBe(1);
+
+        var renderedToast = fixture.nativeElement.querySelector('.toast-message');
+        var innerBody = renderedToast.querySelector('div');
+        expect(innerBody.innerHTML).toBe(htmlContent); 
+        expect(innerBody.textContent).toBe(textContent);
+        expect(innerBody.innerHTML).not.toBe(innerBody.textContent);
+    });
+
+    it('addToast will not render html if bodyOutputType is TrustedHtml and body is null', () => {
+        fixture.detectChanges();
+        var container = fixture.debugElement.children[0].componentInstance;
+        var toast: Toast = {
+            type: 'success',
+            title: 'Yay',
+            body: null,
+            bodyOutputType: BodyOutputType.TrustedHtml
+        }
+
+        fixture.componentInstance.toasterService.pop(toast);
+        fixture.detectChanges();
+        expect(container.toasts.length).toBe(1);
+
+        var renderedToast = fixture.nativeElement.querySelector('.toast-message');
+        var innerBody = renderedToast.querySelector('div');
+        expect(innerBody.innerHTML).toBe(''); 
+    });
+
+    it('addToast will render encoded text instead of html if bodyOutputType is Default', () => {
+        let textContent = 'here is test text';
+        let htmlContent = '<h4>' + textContent + '</h4>';
+        const encodedString = '&lt;h4&gt;here is test text&lt;/h4&gt;';
+
+        fixture.detectChanges();
+        var container = fixture.debugElement.children[0].componentInstance;
+        var toast: Toast = {
+            type: 'success',
+            title: 'Yay',
+            body: htmlContent,
+            bodyOutputType: BodyOutputType.Default
+        }
+
+        fixture.componentInstance.toasterService.pop(toast);
+        fixture.detectChanges();
+        expect(container.toasts.length).toBe(1);
+
+        var renderedToast = fixture.nativeElement.querySelector('.toast-message');
+        var innerBody = renderedToast.querySelector('div');
+        expect(innerBody.innerHTML).toBe(encodedString);
+        expect(innerBody.textContent).toBe(htmlContent);
+    });
 });
 
 describe('Multiple ToasterContainerComponent components', () => {