fix(toast.component): Dynamic components can render

- Dynamic template data would break `bodyOutputType.Component`
rendering. A forced `detectChanges()` call has been added after the
component is created and loaded to enable this functionality.
Additional test cases were added for the gap.  Closes
#71).
- The library entrance attempts to load `Toast` from `./lib/toast`.
Since the `Toast` file is an interface-only file, there is nothing to
load.  Closes #70
- The library has been tested through to Angular 2.0.2.

.travis.yml

@@ -6,7 +6,7 @@ before_install:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
 install: 
-  - npm install [email protected] [email protected] @angular/[email protected].0 @angular/[email protected].0 @angular/[email protected].0 @angular/[email protected].0 @angular/[email protected].0
+  - npm install [email protected] [email protected] @angular/[email protected].2 @angular/[email protected].2 @angular/[email protected].2 @angular/[email protected].2 @angular/[email protected].2
   - npm install
 script:
   - npm run build

CHANGELOG.md

@@ -1,3 +1,17 @@
+# 1.0.2 (2016-10-12)
+### Bug Fixes
+* **toast.component:** Dynamic template data would break `bodyOutputType.Component` rendering. 
+A forced `detectChanges()` call has been added after the component is created and loaded to enable 
+this functionality.  Additional test cases were added for the gap.  Closes 
+[#71](https://github.com/Stabzs/Angular2-Toaster/issues/71).
+* **angular2-toaster.js:** The library entrance attempts to load `Toast` from `./lib/toast`.  Since 
+the `Toast` file is an interface-only file, there is nothing to load.  Closes 
+[#70](https://github.com/Stabzs/Angular2-Toaster/issues/70).
+
+### Features
+* **Angular 2.0.2 Support:** The library has been tested through to Angular 2.0.2.
+
+
 # 1.0.1 (2016-09-16)
 ### Bug Fix
 * **package.json:** The `typings install` step was incorrectly set in the `postinstall` hook when 

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&bump=1.0.1)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master)
+[![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master&b=1.0.2)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master)
 
-### Current Version 1.0.1
+### Current Version 1.0.2
 
 ## Installation:
 

angular2-toaster.js

@@ -1,5 +1,4 @@
 exports.BodyOutputType = require('./lib/bodyOutputType').BodyOutputType;
-exports.Toast = require('./lib/toast').Toast;
 exports.ToastComponent = require('./lib/toast.component').ToastComponent;
 exports.ToasterConfig = require('./lib/toaster-config').ToasterConfig;
 exports.ToasterContainerComponent = require('./lib/toaster-container.component').ToasterContainerComponent;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-toaster",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "An Angular 2 Toaster Notification library based on AngularJS-Toaster",
   "main": "angular2-toaster.js",
   "scripts": {
@@ -44,23 +44,23 @@
     "rxjs": "5.0.0-beta.12"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^0.6.2",
-    "@angular/platform-server": "^2.0.0",
+    "@angular/compiler-cli": "^0.6.4",
+    "@angular/platform-server": "^2.0.2",
     "core-js": "^2.4.1",
-    "coveralls": "^2.11.13",
+    "coveralls": "^2.11.14",
     "cpx": "^1.5.0",
     "http-server": "^0.9.0",
-    "jasmine-core": "2.5.1",
+    "jasmine-core": "2.5.2",
     "karma": "1.3.0",
     "karma-chrome-launcher": "2.0.0",
     "karma-coverage": "^1.1.1",
     "karma-jasmine": "1.0.2",
     "reflect-metadata": "0.1.8",
-    "remap-istanbul": "^0.6.4",
+    "remap-istanbul": "^0.7.0",
     "rimraf": "^2.5.4",
-    "systemjs": "^0.19.38",
-    "typescript": "2.0.2",
-    "typings": "^1.3.3",
+    "systemjs": "^0.19.39",
+    "typescript": "2.0.3",
+    "typings": "^1.4.0",
     "zone.js": "0.6.21"
   }
-}
+}

src/toast.component.ts

@@ -1,4 +1,5 @@
-import {Component, Input, ViewChild, ViewContainerRef, EventEmitter, ComponentFactoryResolver}
+import {Component, Input, ViewChild, ViewContainerRef, EventEmitter, 
+    ComponentFactoryResolver, ChangeDetectorRef}
 from '@angular/core';
 import {DomSanitizer, SafeHtml} from '@angular/platform-browser'
 
@@ -36,7 +37,8 @@ export class ToastComponent {
 
     constructor(
       private sanitizer: DomSanitizer,
-      private componentFactoryResolver : ComponentFactoryResolver
+      private componentFactoryResolver : ComponentFactoryResolver,
+      private changeDetectorRef : ChangeDetectorRef
     ) {}
 
     ngOnInit() {
@@ -48,7 +50,8 @@ export class ToastComponent {
     ngAfterViewInit() {
         if (this.toast.bodyOutputType === this.bodyOutputType.Component) {
             let component = this.componentFactoryResolver.resolveComponentFactory(this.toast.body);
-            this.componentBody.createComponent(component, null, this.componentBody.injector);            
+            this.componentBody.createComponent(component, null, this.componentBody.injector);
+            this.changeDetectorRef.detectChanges();
         }
     }
 

src/toaster-container.component.spec.ts

@@ -44,6 +44,19 @@ export class TestDynamicComponent { }
 })
 export class TestDynamicComponentModule { }
 
+@Component({
+  selector: 'bound-dynamic-component',
+  template: `<div>{{someValue}} loaded via component</div>`
+})
+export class TestBoundDynamicComponent { 
+  someValue: string = 'Some value';
+}
+@NgModule({
+    bootstrap: [TestBoundDynamicComponent],
+    declarations: [TestBoundDynamicComponent]
+})
+export class TestBoundDynamicComponentModule { }
+
 
 describe('ToasterContainerComponent with sync ToasterService', () => {
     let toasterService: ToasterService,
@@ -937,4 +950,50 @@ describe('Multiple ToasterContainerComponent components', () => {
         expect(container1.toasts[0].title).toBe('fixture 1');
         expect(container2.toasts[0].title).toBe('fixture 2');
     });
+});
+
+describe('ToasterContainerComponent when included as a component with bindings', () => {
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [ToasterModule, TestBoundDynamicComponentModule]
+        });
+
+        fixture = TestBed.createComponent<TestComponent>(TestComponent);
+    });
+
+    it('should use the bound toasterconfig object if provided', () => {
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance).toBeDefined();
+
+        var container = fixture.debugElement.children[0].componentInstance;
+
+        expect(container).toBeDefined();
+        expect(container.toasterconfig).toBeDefined();
+        expect(container.toasterconfig.showCloseButton).toBe(true);
+        expect(container.toasterconfig.tapToDismiss).toBe(false);
+        expect(container.toasterconfig.timeout).toBe(0);
+    });
+
+
+    it('should redner the dynamic bound content', () => {
+        fixture.detectChanges();
+        var container = fixture.debugElement.children[0].componentInstance;
+        var toast: Toast = {
+            type: 'success',
+            title: 'Yay',
+            body: TestBoundDynamicComponent,
+            bodyOutputType: BodyOutputType.Component
+        };
+
+        fixture.componentInstance.toasterService.pop(toast);
+        fixture.detectChanges();
+        expect(container.toasts.length).toBe(1);
+
+        var renderedToast = fixture.nativeElement.querySelector('bound-dynamic-component');
+        expect(renderedToast.innerHTML).toBe('<div>Some value loaded via component</div>');
+    });
 });