Fix binding for calculated options on initialization

Author: anna-zhernovkova

src/core/component.ts

@@ -24,6 +24,8 @@ export abstract class DxComponent implements AfterViewInit, INestedOptionContain
     instance: any;
     changedOptions = {};
     renderOnViewInit = true;
+    events = {};
+    ProcessEvent: Function;
 
     protected _events: { subscribe?: string, emit: string }[];
 
@@ -45,11 +47,9 @@ export abstract class DxComponent implements AfterViewInit, INestedOptionContain
             this.eventHelper.createEmitter(event.emit, event.subscribe);
         });
     }
-    private _initEvents() {
-        this.instance.on('optionChanged', e => {
-            this.changedOptions[e.name] = e.value;
-            this.eventHelper.fireNgEvent(e.name + 'Change', [e.value]);
-        });
+    private optionChangeHandler(e) {
+        this.changedOptions[e.name] = e.value;
+        this.ProcessEvent(e);
     }
     _shouldOptionChange(name: string, value: any) {
         if (this.changedOptions.hasOwnProperty(name)) {
@@ -81,10 +81,33 @@ export abstract class DxComponent implements AfterViewInit, INestedOptionContain
     }
     protected abstract _createInstance(element, options)
     protected _createWidget(element: any) {
+        let that = this;
+
         this._initTemplates();
         this._initOptions();
+
+        this.ProcessEvent = function(e) {
+            that.events[e.name + 'Change'] = [e.value];
+        };
+
+        this._initialOptions.onInitialized = function(e) {
+            e.component.on('optionChanged', that.optionChangeHandler.bind(that));
+        };
         this.instance = this._createInstance(element, this._initialOptions);
-        this._initEvents();
+
+        this.ProcessEvent = function(e) {
+            that.eventHelper.fireNgEvent(e.name + 'Change', [e.value]);
+        };
+
+        let subsriber = this.ngZone.onStable.subscribe(() => {
+            subsriber.unsubscribe();
+
+            that.ngZone.run(() => {
+                for (let key in that.events) {
+                    that.eventHelper.fireNgEvent(key, that.events[key]);
+                }
+            });
+        });
     }
     protected _destroyWidget() {
         if (this.instance) {
@@ -93,12 +116,12 @@ export abstract class DxComponent implements AfterViewInit, INestedOptionContain
             element.remove();
         }
     }
-    constructor(protected element: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, private watcherHelper: WatcherHelper) {
+    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(ngZone, this);
+        this.eventHelper = new EmitterHelper(this.ngZone, this);
     }
     ngAfterViewInit() {
         if (this.renderOnViewInit) {

tests/src/core/component.spec.ts

@@ -30,6 +30,7 @@ let DxTestWidget = DxButton['inherit']({
     _render() {
         this.callBase();
         this.element()[0].classList.add('dx-test-widget');
+        this.option('testCalculatedOption', 'changed');
     }
 });
 
@@ -46,12 +47,20 @@ export class DxTestWidgetComponent extends DxComponent implements AfterViewInit,
     set testOption(value: any) {
         this._setOption('testOption', value);
     };
+    @Input()
+    get testCalculatedOption(): any {
+        return this._getOption('testCalculatedOption');
+    }
+    set testCalculatedOption(value: any) {
+        this._setOption('testCalculatedOption', value);
+    };
 
     @Output() onOptionChanged = new EventEmitter<any>();
     @Output() onInitialized = new EventEmitter<any>();
     @Output() onDisposing = new EventEmitter<any>();
     @Output() onContentReady = new EventEmitter<any>();
     @Output() testOptionChange = new EventEmitter<any>();
+    @Output() testCalculatedOptionChange = new EventEmitter<any>();
 
     constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper) {
         super(elementRef, ngZone, templateHost, _watcherHelper);
@@ -61,7 +70,8 @@ export class DxTestWidgetComponent extends DxComponent implements AfterViewInit,
             { subscribe: 'initialized', emit: 'onInitialized' },
             { subscribe: 'disposing', emit: 'onDisposing' },
             { subscribe: 'contentReady', emit: 'onContentReady' },
-            { emit: 'testOptionChange' }
+            { emit: 'testOptionChange' },
+            { emit: 'testCalculatedOptionChange' }
         ]);
     }
 
@@ -85,6 +95,8 @@ export class DxTestWidgetComponent extends DxComponent implements AfterViewInit,
 export class TestContainerComponent {
     visible = true;
     testOption: string;
+    testCalculatedOption = 'initial';
+
     @ViewChildren(DxTestWidgetComponent) innerWidgets: QueryList<DxTestWidgetComponent>;
     testMethod() {
     }
@@ -349,4 +361,18 @@ describe('DevExtreme Angular widget', () => {
         instance.fireEvent('unknownEvent');
     }));
 
+    it('should detect option changes when option was changed on DX widget creation (T527596)', async(() => {
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: '<dx-test-widget [(testCalculatedOption)]="testCalculatedOption"></dx-test-widget>'
+            }
+        });
+
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+
+        expect(getWidget(fixture).option('testCalculatedOption')).toBe('changed');
+        expect(fixture.componentInstance.testCalculatedOption).toBe('changed');
+    }));
+
   });