Reset value of nested components (#1021)

* Reset value of nested components

* Fix lint

Author: dxvladislavvolkov

src/core/nested-option.ts

@@ -64,6 +64,10 @@ export abstract class BaseNestedOption implements INestedOptionContainer, IColle
         }
     }
 
+    protected _resetOption(name: string) {
+        this.instance.resetOption(name);
+    }
+
     setHost(host: INestedOptionContainer, optionPath: IOptionPathGetter) {
         this._host = host;
         this._hostOptionPath = optionPath;

templates/nested-component.tst

@@ -3,7 +3,8 @@
 <#? it.inputs #>/* tslint:disable:use-input-property-decorator */
 <#?#>
 import {
-    Component,
+    Component,<#? !it.isCollection #>
+    OnDestroy,<#?#>
     NgModule,
     Host,<#? it.hasTemplate #>
     ElementRef,
@@ -44,7 +45,8 @@ import { <#= it.baseClass #> } from '<#= it.basePath #>';
         '<#= input.name #>'<#? i < it.inputs.length-1 #>,<#?#><#~#>
     ]<#?#>
 })
-export class <#= it.className #>Component extends <#= it.baseClass #><#? it.hasTemplate #> implements AfterViewInit, IDxTemplateHost<#?#> {<#~ it.properties :prop:i #>
+export class <#= it.className #>Component extends <#= it.baseClass #><#? it.hasTemplate #> implements AfterViewInit,<#? !it.isCollection #> OnDestroy,<#?#>
+    IDxTemplateHost<#?#><#? !it.isCollection && !it.hasTemplate #> implements OnDestroy <#?#> {<#~ it.properties :prop:i #>
     @Input()
     get <#= prop.name #>(): <#= prop.type #> {
         return this._getOption('<#= prop.name #>');
@@ -103,6 +105,11 @@ export class <#= it.className #>Component extends <#= it.baseClass #><#? it.hasT
         extractTemplate(this, this.element, this.renderer, this.document);
     }
 <#?#>
+<#? !it.isCollection #>
+    ngOnDestroy() {
+        this._resetOption(this._optionPath);
+    }
+<#?#>
 }
 
 @NgModule({

tests/src/server/component-names.ts

@@ -16,14 +16,18 @@ export const componentNames = [
     'data-grid',
     'date-box',
     'defer-rendering',
+    'diagram',
+    'draggable',
     'drawer',
     'drop-down-box',
     'drop-down-button',
+    'file-manager',
     'file-uploader',
     'filter-builder',
     'form',
     'funnel',
     'gallery',
+    'gantt',
     'html-editor',
     'linear-gauge',
     'list',
@@ -55,6 +59,7 @@ export const componentNames = [
     'slide-out',
     'slide-out-view',
     'slider',
+    'sortable',
     'sparkline',
     'speed-dial-action',
     'switch',

tests/src/ui/data-grid.spec.ts

@@ -22,6 +22,7 @@ import DxDataGrid from 'devextreme/ui/data_grid';
     template: ''
 })
 class TestContainerComponent {
+    showComponent = true;
     dataSource = [{
         id: 1,
         string: 'String',
@@ -113,8 +114,8 @@ describe('DxDataGrid', () => {
         TestBed.overrideComponent(TestContainerComponent, {
             set: {
                 template: `
-                <dx-data-grid 
-                    [columns]="['obj.field']" 
+                <dx-data-grid
+                    [columns]="['obj.field']"
                     [dataSource]="dataSourceWithUndefined">
                 </dx-data-grid>`
             }
@@ -206,6 +207,34 @@ describe('DxDataGrid', () => {
         jasmine.clock().uninstall();
     });
 
+    it('should reset nested option', () => {
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `<dx-data-grid [dataSource]="[{text: 'text'}]">
+                    <dxo-column-chooser *ngIf="showComponent" [enabled]="true"></dxo-column-chooser>
+                    <dxi-column dataField="text"></dxi-column>
+                </dx-data-grid>`
+            }
+        });
+
+        jasmine.clock().uninstall();
+        jasmine.clock().install();
+
+        let fixture = TestBed.createComponent(TestContainerComponent);
+
+        fixture.detectChanges();
+
+        jasmine.clock().tick(101);
+        let testComponent = fixture.componentInstance;
+        const instance = testComponent.innerWidgets.last.instance;
+        expect(instance.option('columnChooser').enabled).toBe(true);
+
+        testComponent.showComponent = false;
+        fixture.detectChanges();
+        expect(instance.option('columnChooser').enabled).toBe(false);
+        jasmine.clock().uninstall();
+    });
+
     it('should destroy devextreme components in template correctly', () => {
         @Component({
             selector: 'test-container-component',
@@ -274,7 +303,7 @@ describe('Nested DxDataGrid', () => {
         TestBed.overrideComponent(TestContainerComponent, {
             set: {
                 template: `
-                    <dx-data-grid 
+                    <dx-data-grid
                         [dataSource]="dataSource"
                         keyExpr="id"
                         [masterDetail]="{ enabled: true, template: 'detail' }"
@@ -295,7 +324,7 @@ describe('Nested DxDataGrid', () => {
                         <dxi-column dataField="string"></dxi-column>
                         <dxi-column dataField="string"></dxi-column>
                         <dxi-column dataField="string"></dxi-column>
-                        
+
                         <div *dxTemplate="let data of 'detail'">
                             <dx-data-grid [dataSource]="dataSource">
                                 <dxi-column dataField="number"></dxi-column>