Dispose widgets only once

Author: kvet

src/core/component.ts

@@ -88,7 +88,7 @@ export abstract class DxComponent implements INestedOptionContainer, ICollection
     }
     protected _destroyWidget() {
         if (this.instance) {
-            this.instance._dispose();
+            this.instance.element().triggerHandler({ type: 'dxremove', _angularIntegration: true });
         }
     }
     constructor(protected element: ElementRef, private ngZone: NgZone, templateHost: DxTemplateHost, private watcherHelper: WatcherHelper) {

src/core/template.ts

@@ -46,7 +46,11 @@ export class DxTemplateDirective {
         // =========== /WORKAROUND =============
         return $(childView.rootNodes)
             .addClass(DX_TEMPLATE_WRAPPER_CLASS)
-            .on('dxremove', () => childView.destroy());
+            .on('dxremove', (e) => {
+                if (!e._angularIntegration) {
+                    childView.destroy();
+                }
+            });
     }
 }
 

tests/src/ui/list.spec.ts

@@ -15,6 +15,7 @@ import {
 import DxList from 'devextreme/ui/list';
 
 import {
+    DxButtonModule,
     DxListModule,
     DxListComponent
 } from '../../../dist';
@@ -325,8 +326,7 @@ describe('DxList', () => {
         expect(instance.element().find('.dx-item-content').eq(0).text()).toBe('testTemplate');
     }));
 
-
-    it('should destroy all components inside template', () => {
+    it('should destroy angular components inside template', () => {
         let destroyed = false;
         @Component({
             selector: 'destroyable-component',
@@ -363,4 +363,76 @@ describe('DxList', () => {
 
         expect(destroyed).toBe(true);
     });
+
+    it('should destroy devextreme components inside template', () => {
+        @Component({
+            selector: 'test-container-component',
+            template: ''
+        })
+        class TestContainerComponent {
+            items = [0];
+            buttonDestroyed = false;
+            listVisible = true;
+        }
+
+        TestBed.configureTestingModule({
+            declarations: [TestContainerComponent],
+            imports: [DxButtonModule, DxListModule]
+        });
+
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `
+                    <dx-list *ngIf="listVisible" [items]="items">
+                        <div *dxTemplate="let item of 'item'">
+                            <dx-button text="Test" (onDisposing)="buttonDestroyed = true"></dx-button>
+                        </div>
+                    </dx-list>
+                `
+            }
+        });
+
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+
+        fixture.componentInstance.listVisible = false;
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.buttonDestroyed).toBe(true);
+    });
+
+    it('should destroy devextreme components in template root correctly', () => {
+        @Component({
+            selector: 'test-container-component',
+            template: ''
+        })
+        class TestContainerComponent {
+            items = [0];
+            buttonDestroyed = false;
+            listVisible = true;
+        }
+
+        TestBed.configureTestingModule({
+            declarations: [TestContainerComponent],
+            imports: [DxButtonModule, DxListModule]
+        });
+
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `
+                    <dx-list *ngIf="listVisible" [items]="items">
+                        <dx-button text="Test" (onDisposing)="buttonDestroyed = true" *dxTemplate="let item of 'item'"></dx-button>
+                    </dx-list>
+                `
+            }
+        });
+
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+
+        fixture.componentInstance.listVisible = false;
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.buttonDestroyed).toBe(true);
+    });
 });