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,9 @@ import {
     CollectionNestedOptionContainerImpl
 } from './nested-option';
 
-export abstract class DxComponent implements AfterViewInit, INestedOptionContainer, ICollectionNestedOptionContainer {
+export abstract class DxComponent implements AfterViewInit, AfterContentChecked, INestedOptionContainer, ICollectionNestedOptionContainer {
     private _initialOptions: any;
+    private _optionToUpdate: any;
     private _collectionContainerImpl: ICollectionNestedOptionContainer;
     eventHelper: EmitterHelper;
     templates: DxTemplateDirective[];
@@ -63,14 +65,14 @@ export abstract class DxComponent implements AfterViewInit, INestedOptionContain
     }
     protected _setOption(name: string, value: any) {
         if (this.instance) {
-            this._updateOption(name, value);
+            this._prepareOptionToUpdate(name, value);
         } else {
             this._initialOptions[name] = value;
         }
     }
-    protected _updateOption(name: string, value: any) {
+    protected _prepareOptionToUpdate(name: string, value: any) {
         if (this._shouldOptionChange(name, value)) {
-            this.instance.option(name, value);
+            this._optionToUpdate[name] = value;
         };
     }
     protected abstract _createInstance(element, options)
@@ -114,11 +116,18 @@ export abstract class DxComponent implements AfterViewInit, INestedOptionContain
     }
     constructor(protected element: ElementRef, private ngZone: NgZone, templateHost: DxTemplateHost, private watcherHelper: WatcherHelper) {
         this._initialOptions = { integrationOptions: {} };
+        this._optionToUpdate = {};
         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) {
+    _prepareOptionToUpdate(name: string, value: any) {
         if (Array.isArray(value)) {
             this._idh.setupSingle(name, value);
             this._idh.getChanges(name, value);
         }
 
-        super._updateOption(name, value);
+        super._prepareOptionToUpdate(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);
+    }));
+});