Merge pull request #529 from DevExpress/rework_the_strategy_of_the_applying_options

Rework the strategy of applying options

Author: Aden-git

src/core/component.ts

@@ -2,7 +2,8 @@ import {
     ElementRef,
     NgZone,
     QueryList,
-    AfterViewInit
+    AfterViewInit,
+    AfterContentChecked
 } from '@angular/core';
 
 import { DxTemplateDirective } from './template';
@@ -16,8 +17,8 @@ import {
     CollectionNestedOptionContainerImpl
 } from './nested-option';
 
-export abstract class DxComponent implements AfterViewInit, INestedOptionContainer, ICollectionNestedOptionContainer {
-    private _initialOptions: any;
+export abstract class DxComponent implements AfterViewInit, AfterContentChecked, INestedOptionContainer, ICollectionNestedOptionContainer {
+    private _optionToUpdate: any = {};
     private _collectionContainerImpl: ICollectionNestedOptionContainer;
     eventHelper: EmitterHelper;
     templates: DxTemplateDirective[];
@@ -33,12 +34,12 @@ export abstract class DxComponent implements AfterViewInit, INestedOptionContain
             this.templates.forEach(template => {
                 initialTemplates[template.name] = template;
             });
-            this._initialOptions.integrationOptions.templates = initialTemplates;
+            this._optionToUpdate.integrationOptions.templates = initialTemplates;
         }
     }
     private _initOptions() {
-        this._initialOptions.eventsStrategy = this.eventHelper.strategy;
-        this._initialOptions.integrationOptions.watchMethod = this.watcherHelper.getWatchMethod();
+        this._optionToUpdate.eventsStrategy = this.eventHelper.strategy;
+        this._optionToUpdate.integrationOptions.watchMethod = this.watcherHelper.getWatchMethod();
     }
     protected _createEventEmitters(events) {
         events.forEach(event => {
@@ -55,39 +56,32 @@ export abstract class DxComponent implements AfterViewInit, INestedOptionContain
         return true;
     }
     protected _getOption(name: string) {
-        if (this.instance) {
-            return this.instance.option(name);
-        } else {
-            return this._initialOptions[name];
-        }
+        return this.instance ?
+            this.instance.option(name) :
+            this._optionToUpdate[name];
     }
     protected _setOption(name: string, value: any) {
-        if (this.instance) {
-            this._updateOption(name, value);
-        } else {
-            this._initialOptions[name] = value;
-        }
-    }
-    protected _updateOption(name: string, value: any) {
         if (this._shouldOptionChange(name, value)) {
-            this.instance.option(name, value);
+            this._optionToUpdate[name] = value;
         };
     }
     protected abstract _createInstance(element, options)
     protected _createWidget(element: any) {
         let events = [];
 
+        this._optionToUpdate.integrationOptions = {};
         this._initTemplates();
         this._initOptions();
 
         let optionChangeHandler = function(e) {
             events.push(e.name);
         };
 
-        this._initialOptions.onInitializing = function() {
+        this._optionToUpdate.onInitializing = function() {
             this.on('optionChanged', optionChangeHandler);
         };
-        this.instance = this._createInstance(element, this._initialOptions);
+        this.instance = this._createInstance(element, this._optionToUpdate);
+        this._optionToUpdate = {};
 
         this.instance.off('optionChanged', optionChangeHandler);
         this.instance.on('optionChanged', (e) => {
@@ -113,12 +107,17 @@ export abstract class DxComponent implements AfterViewInit, INestedOptionContain
         }
     }
     constructor(protected element: ElementRef, private ngZone: NgZone, templateHost: DxTemplateHost, private watcherHelper: WatcherHelper) {
-        this._initialOptions = { integrationOptions: {} };
         this.templates = [];
         templateHost.setHost(this);
         this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this));
         this.eventHelper = new EmitterHelper(this.ngZone, this);
     }
+    ngAfterContentChecked() {
+        if (this.instance && Object.keys(this._optionToUpdate).length) {
+            this.instance.option(this._optionToUpdate);
+            this._optionToUpdate = {};
+        }
+    }
     ngAfterViewInit() {
         if (this.renderOnViewInit) {
             this._createWidget(this.element.nativeElement);

templates/component.tst

@@ -148,13 +148,13 @@ export class <#= it.className #>Component extends <#= baseClass #> <#? implement
         this._watcherHelper.checkWatchers();
     }
 
-    _updateOption(name: string, value: any) {
+    _setOption(name: string, value: any) {
         if (Array.isArray(value)) {
             this._idh.setupSingle(name, value);
             this._idh.getChanges(name, value);
         }
 
-        super._updateOption(name, value);
+        super._setOption(name, value);
     }<#?#>
 <#? it.isEditor #>
     ngAfterContentInit() {

tests/src/core/component.spec.ts

@@ -229,6 +229,7 @@ describe('DevExtreme Angular widget', () => {
             instance = getWidget(fixture);
 
         testComponent.testOption = 'Changed 2';
+        fixture.detectChanges();
         expect(instance.option('testOption')).toBe('Changed 2');
 
     }));

tests/src/ui/tab-panel.spec.ts

@@ -0,0 +1,58 @@
+/* tslint:disable:component-selector */
+
+import {
+    Component,
+    ViewChild
+} from '@angular/core';
+
+import {
+    TestBed,
+    async
+} from '@angular/core/testing';
+
+import {
+    DxTabPanelModule,
+    DxTabPanelComponent
+} from '../../../dist';
+
+@Component({
+    selector: 'test-container-component',
+    template: `
+    <dx-tab-panel 
+        [dataSource]="tabPanelItems"
+        [selectedIndex]="selectedIndex">
+    </dx-tab-panel>
+    `
+})
+class TestContainerComponent {
+    @ViewChild(DxTabPanelComponent) tabPanel: DxTabPanelComponent;
+
+    tabPanelItems: number[] = [0];
+    selectedIndex = 0;
+}
+
+describe('DxTagBox', () => {
+
+    beforeEach(() => {
+        TestBed.configureTestingModule(
+            {
+                declarations: [TestContainerComponent],
+                imports: [DxTabPanelModule]
+            });
+    });
+
+    // spec
+    it('option, dependenced on dataSource, slould be applyed', async(() => {
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+
+        let component: any = fixture.componentInstance;
+        component.tabPanelItems.push(1);
+        component.selectedIndex = 1;
+        fixture.detectChanges();
+
+        let instance: any = component.tabPanel.instance;
+        expect(instance.option('items').length).toBe(2);
+        expect(instance.option('selectedIndex')).toBe(1);
+    }));
+});