Fix dxi component template rerendering issues

README.md

@@ -457,6 +457,28 @@ export class AppComponent {
 }
 ```
 
+Note, in some scenarios an item content can be rerendered by it's host component. To keep the item child components alive they should be declared as a single template via the `dxTemplate` structural directive. There are several alternatives depending on the item content:
+
+```html
+<dx-list>
+    <dxi-item>
+        <dx-button text="One Child" *dxTemplate></dx-button>
+    </dxi-item>
+    <dxi-item>
+        <div *dxTemplate>
+            <dx-button text="First Child"></dx-button>
+            <dx-button text="Second Child"></dx-button>
+        </div>
+    </dxi-item>
+    <dxi-item>
+        <ng-template dxTemplate>
+            <dx-button text="First Child"></dx-button>
+            <dx-button text="Second Child"></dx-button>
+        </ng-template>
+    </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>

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;

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) {

src/core/template.ts

@@ -23,7 +23,7 @@ export class RenderData {
 }
 
 @Directive({
-    selector: '[dxTemplate][dxTemplateOf]'
+    selector: '[dxTemplate]'
 })
 export class DxTemplateDirective {
     @Input()

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);
     }

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();
+    }));
+
 });