Fix dxi component template rerendering issues (#560)

dxbykov · web-flow · commit e74ac415a818 · 2017-09-28T20:09:36.000+03:00
* Introduce templated content in dxi components (T532675)
* Fix interface naming inconsistency
diff --git a/README.md b/README.md
@@ -457,6 +457,18 @@ export class AppComponent {
 }
 ```
 
+If your item template contains some *nested* components, declare it using the parameterless `dxTemplate` structural directive as follows:
+
+```html
+<dx-list>
+    <dxi-item>
+        <div *dxTemplate>
+            <dx-button text="I'm a nested child component"></dx-button>
+        </div>
+    </dxi-item>
+</dx-list>
+```
+
 Angular has a built-in `template` directive. To define the `template` property of the configuration component (for example, `dxo-master-detail`), use the following code:
 ```html
 <dxo-master-detail [template]="'masterDetail'"></dxo-master-detail>
diff --git a/src/core/component.ts b/src/core/component.ts
@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 
 import { DxTemplateDirective } from './template';
-import { DxTemplateHost } from './template-host';
+import { IDxTemplateHost, DxTemplateHost } from './template-host';
 import { EmitterHelper } from './events-strategy';
 import { WatcherHelper } from './watcher-helper';
 import {
@@ -17,7 +17,8 @@ import {
     CollectionNestedOptionContainerImpl
 } from './nested-option';
 
-export abstract class DxComponent implements AfterViewInit, AfterContentChecked, INestedOptionContainer, ICollectionNestedOptionContainer {
+export abstract class DxComponent implements AfterViewInit, AfterContentChecked,
+        INestedOptionContainer, ICollectionNestedOptionContainer, IDxTemplateHost {
     private _optionToUpdate: any = {};
     private _collectionContainerImpl: ICollectionNestedOptionContainer;
     eventHelper: EmitterHelper;
diff --git a/src/core/events-strategy.ts b/src/core/events-strategy.ts
@@ -3,13 +3,13 @@ import { DxComponent } from './component';
 
 const dxToNgEventNames = {};
 
-interface EventSubscription {
+interface IEventSubscription {
     handler: any;
     unsubscribe: () => void;
 }
 
 export class NgEventsStrategy {
-    private subscriptions: { [key: string]: EventSubscription[] } = {};
+    private subscriptions: { [key: string]: IEventSubscription[] } = {};
 
     constructor(private component: DxComponent, private ngZone: NgZone) { }
 
@@ -62,13 +62,13 @@ export class NgEventsStrategy {
     }
 }
 
-interface RememberedEvent {
+interface IRememberedEvent {
     name: string;
     context: EmitterHelper;
 }
 
-let events: RememberedEvent[] = [];
-let onStableSubscription: EventSubscription = null;
+let events: IRememberedEvent[] = [];
+let onStableSubscription: IEventSubscription = null;
 
 let createOnStableSubscription = function(ngZone: NgZone, fireNgEvent: Function) {
     if (onStableSubscription) {
diff --git a/src/core/nested-option.ts b/src/core/nested-option.ts
@@ -11,11 +11,11 @@ export interface INestedOptionContainer {
     instance: any;
 }
 
-export interface OptionPathGetter { (): string; }
+export interface IOptionPathGetter { (): string; }
 
 export abstract class BaseNestedOption implements INestedOptionContainer, ICollectionNestedOptionContainer {
     protected _host: INestedOptionContainer;
-    protected _hostOptionPath: OptionPathGetter;
+    protected _hostOptionPath: IOptionPathGetter;
     private _collectionContainerImpl: ICollectionNestedOptionContainer;
     protected _initialOptions = {};
 
@@ -42,7 +42,7 @@ export abstract class BaseNestedOption implements INestedOptionContainer, IColle
         }
     }
 
-    setHost(host: INestedOptionContainer, optionPath: OptionPathGetter) {
+    setHost(host: INestedOptionContainer, optionPath: IOptionPathGetter) {
         this._host = host;
         this._hostOptionPath = optionPath;
     }
@@ -91,7 +91,7 @@ export class CollectionNestedOptionContainerImpl implements ICollectionNestedOpt
 }
 
 export abstract class NestedOption extends BaseNestedOption {
-    setHost(host: INestedOptionContainer, optionPath: OptionPathGetter) {
+    setHost(host: INestedOptionContainer, optionPath: IOptionPathGetter) {
         super.setHost(host, optionPath);
 
         this._host[this._optionPath] = this._initialOptions;
@@ -123,10 +123,10 @@ export abstract class CollectionNestedOption extends BaseNestedOption implements
     }
 }
 
-export interface OptionWithTemplate extends BaseNestedOption {
+export interface IOptionWithTemplate extends BaseNestedOption {
     template: any;
 }
-export function extractTemplate(option: OptionWithTemplate, element: ElementRef) {
+export function extractTemplate(option: IOptionWithTemplate, element: ElementRef) {
     if (!option.template === undefined || !element.nativeElement.hasChildNodes()) {
         return;
     }
@@ -184,9 +184,9 @@ export function extractTemplate(option: OptionWithTemplate, element: ElementRef)
 
 export class NestedOptionHost {
     private _host: INestedOptionContainer;
-    private _optionPath: OptionPathGetter;
+    private _optionPath: IOptionPathGetter;
 
-    setHost(host: INestedOptionContainer, optionPath?: OptionPathGetter) {
+    setHost(host: INestedOptionContainer, optionPath?: IOptionPathGetter) {
         this._host = host;
         this._optionPath = optionPath || (() => '');
     }
diff --git a/src/core/template-host.ts b/src/core/template-host.ts
@@ -1,9 +1,12 @@
-import { DxComponent } from './component';
 import { DxTemplateDirective } from './template';
 
+export interface IDxTemplateHost {
+    setTemplate(template: DxTemplateDirective);
+};
+
 export class DxTemplateHost {
-    host: DxComponent;
-    setHost(host: DxComponent) {
+    host: IDxTemplateHost;
+    setHost(host: IDxTemplateHost) {
         this.host = host;
     }
     setTemplate(template: DxTemplateDirective) {
diff --git a/src/core/template.ts b/src/core/template.ts
@@ -23,7 +23,7 @@ export class RenderData {
 }
 
 @Directive({
-    selector: '[dxTemplate][dxTemplateOf]'
+    selector: '[dxTemplate]'
 })
 export class DxTemplateDirective {
     @Input()
diff --git a/templates/nested-component.tst b/templates/nested-component.tst
@@ -13,7 +13,9 @@ import {
     QueryList<#?#>
 } from '@angular/core';
 
-import { NestedOptionHost<#? it.hasTemplate #>, extractTemplate<#?#> } from '../../core/nested-option';
+import { NestedOptionHost<#? it.hasTemplate #>, extractTemplate<#?#> } from '../../core/nested-option';<#? it.hasTemplate #>
+import { DxTemplateDirective } from '../../core/template';
+import { IDxTemplateHost, DxTemplateHost } from '../../core/template-host';<#?#>
 import { <#= it.baseClass #> } from '<#= it.basePath #>';
 <#~ it.collectionNestedComponents :component:i #><#? component.className !== it.className #>import { <#= component.className #>Component } from './<#= component.path #>';
 <#?#><#~#>
@@ -22,12 +24,12 @@ import { <#= it.baseClass #> } from '<#= it.basePath #>';
     selector: '<#= it.selector #>',
     template: '<#? it.hasTemplate #><ng-content></ng-content><#?#>',
     styles: ['<#? it.hasTemplate #>:host { display: block; }<#?#>'],
-    providers: [NestedOptionHost]<#? it.inputs #>,
+    providers: [NestedOptionHost<#? it.hasTemplate #>, DxTemplateHost<#?#>]<#? it.inputs #>,
     inputs: [<#~ it.inputs :input:i #>
         '<#= input.name #>'<#? i < it.inputs.length-1 #>,<#?#><#~#>
     ]<#?#>
 })
-export class <#= it.className #>Component extends <#= it.baseClass #><#? it.hasTemplate #> implements AfterViewInit<#?#> {<#~ it.properties :prop:i #>
+export class <#= it.className #>Component extends <#= it.baseClass #><#? it.hasTemplate #> implements AfterViewInit, IDxTemplateHost<#?#> {<#~ it.properties :prop:i #>
     @Input()
     get <#= prop.name #>() {
         return this._getOption('<#= prop.name #>');
@@ -49,13 +51,19 @@ export class <#= it.className #>Component extends <#= it.baseClass #><#? it.hasT
         this.setChildren('<#= component.propertyName #>', value);
     }
 <#~#>
-
-    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, @Host() optionHost: NestedOptionHost<#? it.hasTemplate #>, private element: ElementRef<#?#>) {
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost<#? it.hasTemplate #>,
+            @Host() templateHost: DxTemplateHost,
+            private element: ElementRef<#?#>) {
         super();
         parentOptionHost.setNestedOption(this);
-        optionHost.setHost(this, this._fullOptionPath.bind(this));
+        optionHost.setHost(this, this._fullOptionPath.bind(this));<#? it.hasTemplate #>
+        templateHost.setHost(this);<#?#>
     }
 <#? it.hasTemplate #>
+    setTemplate(template: DxTemplateDirective) {
+        this.template = template;
+    }
     ngAfterViewInit() {
         extractTemplate(this, this.element);
     }
diff --git a/tests/src/ui/list.spec.ts b/tests/src/ui/list.spec.ts
@@ -1,6 +1,7 @@
 /* tslint:disable:component-selector */
 
 import {
+    VERSION,
     Component,
     ViewChildren,
     QueryList,
@@ -515,4 +516,43 @@ describe('DxList', () => {
 
         expect(fixture.componentInstance.buttonDestroyed).toBe(true);
     });
+
+    it('should use item template to render/rerender an item with a template (T532675)', async(() => {
+        const ngTemplateName = Number(VERSION.major) >= 4 ? 'ng-template' : 'template';
+
+        TestBed.configureTestingModule({
+            declarations: [TestContainerComponent],
+            imports: [DxButtonModule, DxListModule]
+        });
+
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `
+                    <dx-list>
+                        <dxi-item>
+                            <dx-button *dxTemplate></dx-button>
+                        </dxi-item>
+                        <dxi-item>
+                            <${ngTemplateName} dxTemplate>
+                                <dx-button></dx-button>
+                            </${ngTemplateName}>
+                        </dxi-item>
+                    </dx-list>
+                `
+            }
+        });
+
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+
+        let instance = getWidget(fixture);
+        expect(instance.element().find('.dx-button').eq(0).dxButton('instance')).not.toBeUndefined();
+        expect(instance.element().find('.dx-button').eq(1).dxButton('instance')).not.toBeUndefined();
+
+        instance.repaint();
+        fixture.detectChanges();
+        expect(instance.element().find('.dx-button').eq(0).dxButton('instance')).not.toBeUndefined();
+        expect(instance.element().find('.dx-button').eq(1).dxButton('instance')).not.toBeUndefined();
+    }));
+
 });

Original file line number	Diff line number	Diff line change
`@@ -3,13 +3,13 @@ import { DxComponent } from './component';`
`3`	`3`
`4`	`4`	`const dxToNgEventNames = {};`
`5`	`5`
`6`		`-interface EventSubscription {`
	`6`	`+interface IEventSubscription {`
`7`	`7`	`handler: any;`
`8`	`8`	`unsubscribe: () => void;`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`export class NgEventsStrategy {`
`12`		`- private subscriptions: { [key: string]: EventSubscription[] } = {};`
	`12`	`+ private subscriptions: { [key: string]: IEventSubscription[] } = {};`
`13`	`13`
`14`	`14`	`constructor(private component: DxComponent, private ngZone: NgZone) { }`
`15`	`15`
`@@ -62,13 +62,13 @@ export class NgEventsStrategy {`
`62`	`62`	`}`
`63`	`63`	`}`
`64`	`64`
`65`		`-interface RememberedEvent {`
	`65`	`+interface IRememberedEvent {`
`66`	`66`	`name: string;`
`67`	`67`	`context: EmitterHelper;`
`68`	`68`	`}`
`69`	`69`
`70`		`-let events: RememberedEvent[] = [];`
`71`		`-let onStableSubscription: EventSubscription = null;`
	`70`	`+let events: IRememberedEvent[] = [];`
	`71`	`+let onStableSubscription: IEventSubscription = null;`
`72`	`72`
`73`	`73`	`let createOnStableSubscription = function(ngZone: NgZone, fireNgEvent: Function) {`
`74`	`74`	`if (onStableSubscription) {`
Original file line number	Diff line number	Diff line change
`@@ -11,11 +11,11 @@ export interface INestedOptionContainer {`
`11`	`11`	`instance: any;`
`12`	`12`	`}`
`13`	`13`
`14`		`-export interface OptionPathGetter { (): string; }`
	`14`	`+export interface IOptionPathGetter { (): string; }`
`15`	`15`
`16`	`16`	`export abstract class BaseNestedOption implements INestedOptionContainer, ICollectionNestedOptionContainer {`
`17`	`17`	`protected _host: INestedOptionContainer;`
`18`		`- protected _hostOptionPath: OptionPathGetter;`
	`18`	`+ protected _hostOptionPath: IOptionPathGetter;`
`19`	`19`	`private _collectionContainerImpl: ICollectionNestedOptionContainer;`
`20`	`20`	`protected _initialOptions = {};`
`21`	`21`
`@@ -42,7 +42,7 @@ export abstract class BaseNestedOption implements INestedOptionContainer, IColle`
`42`	`42`	`}`
`43`	`43`	`}`
`44`	`44`
`45`		`- setHost(host: INestedOptionContainer, optionPath: OptionPathGetter) {`
	`45`	`+ setHost(host: INestedOptionContainer, optionPath: IOptionPathGetter) {`
`46`	`46`	`this._host = host;`
`47`	`47`	`this._hostOptionPath = optionPath;`
`48`	`48`	`}`
`@@ -91,7 +91,7 @@ export class CollectionNestedOptionContainerImpl implements ICollectionNestedOpt`
`91`	`91`	`}`
`92`	`92`
`93`	`93`	`export abstract class NestedOption extends BaseNestedOption {`
`94`		`- setHost(host: INestedOptionContainer, optionPath: OptionPathGetter) {`
	`94`	`+ setHost(host: INestedOptionContainer, optionPath: IOptionPathGetter) {`
`95`	`95`	`super.setHost(host, optionPath);`
`96`	`96`
`97`	`97`	`this._host[this._optionPath] = this._initialOptions;`
`@@ -123,10 +123,10 @@ export abstract class CollectionNestedOption extends BaseNestedOption implements`
`123`	`123`	`}`
`124`	`124`	`}`
`125`	`125`
`126`		`-export interface OptionWithTemplate extends BaseNestedOption {`
	`126`	`+export interface IOptionWithTemplate extends BaseNestedOption {`
`127`	`127`	`template: any;`
`128`	`128`	`}`
`129`		`-export function extractTemplate(option: OptionWithTemplate, element: ElementRef) {`
	`129`	`+export function extractTemplate(option: IOptionWithTemplate, element: ElementRef) {`
`130`	`130`	`if (!option.template === undefined \|\| !element.nativeElement.hasChildNodes()) {`
`131`	`131`	`return;`
`132`	`132`	`}`
`@@ -184,9 +184,9 @@ export function extractTemplate(option: OptionWithTemplate, element: ElementRef)`
`184`	`184`
`185`	`185`	`export class NestedOptionHost {`
`186`	`186`	`private _host: INestedOptionContainer;`
`187`		`- private _optionPath: OptionPathGetter;`
	`187`	`+ private _optionPath: IOptionPathGetter;`
`188`	`188`
`189`		`- setHost(host: INestedOptionContainer, optionPath?: OptionPathGetter) {`
	`189`	`+ setHost(host: INestedOptionContainer, optionPath?: IOptionPathGetter) {`
`190`	`190`	`this._host = host;`
`191`	`191`	`this._optionPath = optionPath \|\| (() => '');`
`192`	`192`	`}`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export class RenderData {`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`@Directive({`
`26`		`- selector: '[dxTemplate][dxTemplateOf]'`
	`26`	`+ selector: '[dxTemplate]'`
`27`	`27`	`})`
`28`	`28`	`export class DxTemplateDirective {`
`29`	`29`	`@Input()`