Fix #4, Fix #106

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Fix the 'dx-validator' component ([#30](https://github.com/DevExpress/devextreme-angular2/issues/30))
 - Fix the component property change propagation to the corresponding widget option ([#6](https://github.com/DevExpress/devextreme-angular2/issues/6))
+- Fix the 'dxTemplate' directive issues ([#4](https://github.com/DevExpress/devextreme-angular2/issues/4) and [#106](https://github.com/DevExpress/devextreme-angular2/issues/106))  
 
 ## 16.2.1-alpha.1 (2016-10-20)
 

examples/app/main.ts

@@ -1,10 +1,7 @@
-import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { MyAppModule } from './app.module';
 
 import config from 'devextreme/core/config';
 config({ defaulCurrency: 'EUR' });
 
-enableProdMode();
-
 platformBrowserDynamic().bootstrapModule(MyAppModule);

src/core/dx.template.ts

@@ -34,6 +34,10 @@ export class DxTemplateDirective {
         if (renderData.container) {
             renderData.container.append(childView.rootNodes);
         }
+        // =========== WORKAROUND =============
+        // https://github.com/angular/angular/issues/12243
+        childView['detectChanges']();
+        // =========== /WORKAROUND =============
         return $(childView.rootNodes);
     }
     templateAsFunction(model, itemIndex, container) {

tests/src/ui/select-box.spec.ts

@@ -0,0 +1,62 @@
+/// <reference path="../../../typings/globals/jasmine/index.d.ts" />
+
+import {
+    Component,
+} from '@angular/core';
+
+import {
+    TestBed,
+    async
+} from '@angular/core/testing';
+
+import DxSelectBox from 'devextreme/ui/select_box';
+
+import {
+    DxSelectBoxModule,
+    DxTextBoxModule,
+    DxTemplateModule
+} from '../../../dist';
+
+@Component({
+    selector: 'test-container-component',
+    template: ''
+})
+class TestContainerComponent {
+}
+
+describe('DxSelectBox', () => {
+
+    beforeEach(() => {
+        TestBed.configureTestingModule(
+            {
+                declarations: [TestContainerComponent],
+                imports: [DxSelectBoxModule, DxTextBoxModule, DxTemplateModule]
+            });
+    });
+
+    function getWidget(fixture) {
+        let widgetElement = fixture.nativeElement.querySelector('.dx-selectbox') || fixture.nativeElement;
+        return DxSelectBox['getInstance'](widgetElement);
+    }
+
+    // spec
+    it('field template should work', async(() => {
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `
+                    <dx-select-box fieldTemplate="myTemplate">
+                        <div *dxTemplate="let data of 'myTemplate'">
+                            <dx-text-box [value]="data"></dx-text-box>
+                        </div>
+                    </dx-select-box>
+                `
+            }
+        });
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+
+        let instance = getWidget(fixture);
+
+        expect(instance.element().find('.dx-textbox').length).toBe(1);
+    }));
+});