Call ModelView base init after view init (#13261)

* Call ModelView base init after view init

* baseInit to end

src/sql/workbench/browser/modelComponents/button.component.ts

@@ -59,7 +59,7 @@ export default class ButtonComponent extends ComponentWithIconBase<azdata.Button
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
+	ngAfterViewInit(): void {
 		this.baseInit();
 	}
 

src/sql/workbench/browser/modelComponents/card.component.ts

@@ -71,8 +71,7 @@ export default class CardComponent extends ComponentWithIconBase<azdata.CardProp
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
+	ngAfterViewInit(): void {
 		this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
 		this.updateTheme(this.themeService.getColorTheme());
 		this.onkeydown(this._el.nativeElement, (e: StandardKeyboardEvent) => {
@@ -81,7 +80,7 @@ export default class CardComponent extends ComponentWithIconBase<azdata.CardProp
 				DOM.EventHelper.stop(e, true);
 			}
 		});
-
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/checkbox.component.ts

@@ -37,11 +37,6 @@ export default class CheckBoxComponent extends ComponentBase<azdata.CheckBoxProp
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-
-	}
-
 	ngAfterViewInit(): void {
 		if (this._inputContainer) {
 			let inputOptions: ICheckboxOptions = {
@@ -62,6 +57,7 @@ export default class CheckBoxComponent extends ComponentBase<azdata.CheckBoxProp
 			this._register(attachCheckboxStyler(this._input, this.themeService));
 			this._validations.push(() => !this.required || this.checked);
 		}
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/componentBase.ts

@@ -5,7 +5,7 @@
 import 'vs/css!./media/flexContainer';
 
 import {
-	ChangeDetectorRef, ViewChildren, ElementRef, OnDestroy, OnInit, QueryList
+	ChangeDetectorRef, ViewChildren, ElementRef, OnDestroy, QueryList, AfterViewInit
 } from '@angular/core';
 
 import * as types from 'vs/base/common/types';
@@ -27,7 +27,7 @@ export class ItemDescriptor<T> {
 	constructor(public descriptor: IComponentDescriptor, public config: T) { }
 }
 
-export abstract class ComponentBase<TPropertyBag extends azdata.ComponentProperties> extends Disposable implements IComponent, OnDestroy, OnInit {
+export abstract class ComponentBase<TPropertyBag extends azdata.ComponentProperties> extends Disposable implements IComponent, OnDestroy, AfterViewInit {
 	protected properties: { [key: string]: any; } = {};
 	private _valid: boolean = true;
 	protected _validations: (() => boolean | Thenable<boolean>)[] = [];
@@ -58,7 +58,7 @@ export abstract class ComponentBase<TPropertyBag extends azdata.ComponentPropert
 		}
 	}
 
-	abstract ngOnInit(): void;
+	abstract ngAfterViewInit(): void;
 
 	protected baseDestroy(): void {
 		if (this.modelStore) {

src/sql/workbench/browser/modelComponents/declarativeTable.component.ts

@@ -45,11 +45,8 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngAfterViewInit(): void {
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/diffeditor.component.ts

@@ -61,12 +61,12 @@ export default class DiffEditorComponent extends ComponentBase<azdata.DiffEditor
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
+	ngAfterViewInit(): void {
 		this._createEditor();
 		this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, e => {
 			this.layout();
 		}));
+		this.baseInit();
 	}
 
 	private _createEditor(): void {

src/sql/workbench/browser/modelComponents/divContainer.component.ts

@@ -51,12 +51,9 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout, az
 		this._overflowY = '';	// default
 	}
 
-	ngAfterViewInit() {
+	ngAfterViewInit(): void {
 		this.viewInitialized = true;
 		this.updateClickListener();
-	}
-
-	ngOnInit(): void {
 		this.baseInit();
 	}
 

src/sql/workbench/browser/modelComponents/dom.component.ts

@@ -34,12 +34,12 @@ export default class DomComponent extends ComponentBase<azdata.DomProperties> im
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
+	ngAfterViewInit(): void {
 		this.createDomElement();
 		this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, e => {
 			this.layout();
 		}));
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/dropdown.component.ts

@@ -61,10 +61,6 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 		}
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngAfterViewInit(): void {
 		if (this._editableDropDownContainer) {
 			let dropdownOptions: IDropdownOptions = {
@@ -115,6 +111,7 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 		this._register(this._loadingBox);
 		this._register(attachSelectBoxStyler(this._loadingBox, this.themeService));
 		this._loadingBoxContainer.nativeElement.className = ''; // Removing the dropdown arrow icon from the right
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/editor.component.ts

@@ -55,12 +55,12 @@ export default class EditorComponent extends ComponentBase<azdata.EditorProperti
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
+	ngAfterViewInit(): void {
 		this._createEditor().catch((e) => this._logService.error(e));
 		this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, e => {
 			this.layout();
 		}));
+		this.baseInit();
 	}
 
 	private async _createEditor(): Promise<void> {

src/sql/workbench/browser/modelComponents/fileBrowserTree.component.ts

@@ -39,14 +39,11 @@ export default class FileBrowserTreeComponent extends ComponentBase<azdata.FileB
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngAfterViewInit(): void {
 		this._viewModel = this._instantiationService.createInstance(FileBrowserViewModel);
 		this._viewModel.onAddFileTree(args => this.handleOnAddFileTree(args.rootNode, args.selectedNode, args.expandedNodes));
 		this._viewModel.onPathValidate(args => this.handleOnValidate(args.succeeded, args.message));
+		this.baseInit();
 	}
 
 	public initialize() {

src/sql/workbench/browser/modelComponents/flexContainer.component.ts

@@ -52,7 +52,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 		this._justifyContent = '';	// default
 	}
 
-	ngOnInit(): void {
+	ngAfterViewInit(): void {
 		this.baseInit();
 	}
 

src/sql/workbench/browser/modelComponents/formContainer.component.ts

@@ -99,15 +99,12 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngOnDestroy(): void {
 		this.baseDestroy();
 	}
 
 	ngAfterViewInit(): void {
+		this.baseInit();
 	}
 
 	public layout(): void {

src/sql/workbench/browser/modelComponents/groupContainer.component.ts

@@ -49,7 +49,7 @@ export default class GroupContainer extends ContainerBase<GroupLayout, GroupCont
 		this.collapsed = false;
 	}
 
-	ngOnInit(): void {
+	ngAfterViewInit(): void {
 		this.baseInit();
 	}
 
@@ -57,9 +57,6 @@ export default class GroupContainer extends ContainerBase<GroupLayout, GroupCont
 		this.baseDestroy();
 	}
 
-	ngAfterViewInit(): void {
-	}
-
 	onKeyDown(event: KeyboardEvent): void {
 		let e = new StandardKeyboardEvent(event);
 		if (e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space) {

src/sql/workbench/browser/modelComponents/hyperlink.component.ts

@@ -33,12 +33,9 @@ export default class HyperlinkComponent extends TitledComponent<azdata.Hyperlink
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngAfterViewInit(): void {
 		this._register(DOM.addDisposableListener(this._el.nativeElement, 'click', (e: MouseEvent) => this.onClick(e)));
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/image.component.ts

@@ -30,11 +30,8 @@ export default class ImageComponent extends ComponentWithIconBase<azdata.ImageCo
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngAfterViewInit(): void {
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/inputbox.component.ts

@@ -51,10 +51,6 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngAfterViewInit(): void {
 		let inputOptions: IInputOptions = {
 			placeholder: '',
@@ -110,6 +106,7 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 			this.registerInput(this._textAreaInput, () => this.multiline);
 		}
 		this.inputElement.hideErrors = true;
+		this.baseInit();
 	}
 
 	private tryHandleKeyEvent(e: StandardKeyboardEvent): boolean {

src/sql/workbench/browser/modelComponents/listView.component.ts

@@ -39,10 +39,6 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngAfterViewInit(): void {
 		const vscodelistOption: IListOptions<azdata.ListViewOption> = {
 			keyboardSupport: true,
@@ -71,6 +67,7 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
 				DOM.EventHelper.stop(e, true);
 			}
 		}));
+		this.baseInit();
 	}
 
 	setLayout(layout: any): void {

src/sql/workbench/browser/modelComponents/listbox.component.ts

@@ -42,11 +42,6 @@ export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProper
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-
-	}
-
 	ngAfterViewInit(): void {
 		if (this._inputContainer) {
 			this._input = new ListBox([], this.contextViewService);
@@ -80,6 +75,7 @@ export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProper
 				});
 			}));
 		}
+		this.baseInit();
 	}
 
 	public validate(): Thenable<boolean> {

src/sql/workbench/browser/modelComponents/loadingComponent.component.ts

@@ -44,13 +44,9 @@ export default class LoadingComponent extends ComponentBase<azdata.LoadingCompon
 		});
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-
-	}
-
 	ngAfterViewInit(): void {
 		this.setLayout();
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/modelComponentWrapper.component.ts

@@ -5,7 +5,7 @@
 
 import {
 	Component, Input, Inject, forwardRef, ComponentFactoryResolver, ViewChild,
-	ElementRef, OnInit, ChangeDetectorRef, ReflectiveInjector, Injector, ComponentRef
+	ElementRef, ChangeDetectorRef, ReflectiveInjector, Injector, ComponentRef, AfterViewInit
 } from '@angular/core';
 
 import { AngularDisposable } from 'sql/base/browser/lifecycle';
@@ -40,7 +40,7 @@ export interface ModelComponentParams extends IBootstrapParams {
 		</ng-template>
 	`
 })
-export class ModelComponentWrapper extends AngularDisposable implements OnInit {
+export class ModelComponentWrapper extends AngularDisposable implements AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
 
@@ -74,11 +74,8 @@ export class ModelComponentWrapper extends AngularDisposable implements OnInit {
 		}
 	}
 
-	ngOnInit() {
-		this._register(this.themeService.onDidColorThemeChange(event => this.updateTheme(event)));
-	}
-
 	ngAfterViewInit() {
+		this._register(this.themeService.onDidColorThemeChange(event => this.updateTheme(event)));
 		this.updateTheme(this.themeService.getColorTheme());
 		if (this.componentHost) {
 			this.loadComponent();

src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts

@@ -34,7 +34,7 @@ export default class PropertiesContainerComponent extends ComponentBase<azdata.P
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
+	ngAfterViewInit(): void {
 		this.baseInit();
 	}
 

src/sql/workbench/browser/modelComponents/radioButton.component.ts

@@ -35,11 +35,6 @@ export default class RadioButtonComponent extends ComponentBase<azdata.RadioButt
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-
-	}
-
 	ngAfterViewInit(): void {
 		if (this._inputContainer) {
 			this._input = new RadioButton(this._inputContainer.nativeElement, {
@@ -55,6 +50,7 @@ export default class RadioButtonComponent extends ComponentBase<azdata.RadioButt
 				});
 			}));
 		}
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/radioCardGroup.component.ts

@@ -34,7 +34,7 @@ export default class RadioCardGroup extends ComponentBase<azdata.RadioCardGroupC
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
+	ngAfterViewInit(): void {
 		this.baseInit();
 	}
 

src/sql/workbench/browser/modelComponents/separator.component.ts

@@ -33,15 +33,12 @@ export default class SeparatorComponent extends ComponentBase<azdata.SeparatorCo
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngAfterViewInit(): void {
 		if (this._separatorContainer) {
 			this._separator = new Separator(this._separatorContainer.nativeElement);
 			this._register(this._separator);
 		}
+		this.baseInit();
 	}
 
 	setLayout(layout: any): void {

src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts

@@ -73,16 +73,13 @@ export default class SplitViewContainerImpl extends ContainerBase<FlexItemLayout
 		this._orientation = Orientation.VERTICAL; // default
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngOnDestroy(): void {
 		this.baseDestroy();
 	}
 
 	ngAfterViewInit(): void {
 		this._splitView = this._register(new SplitView(this._el.nativeElement, { orientation: this._orientation }));
+		this.baseInit();
 	}
 
 	private GetCorrespondingView(component: IComponent, orientation: Orientation): IView {

src/sql/workbench/browser/modelComponents/tabbedPanel.component.ts

@@ -57,12 +57,9 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngAfterViewInit(): void {
 		this._register(attachTabbedPanelStyler(this._panel, this.themeService));
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/table.component.ts

@@ -74,11 +74,6 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-
-	}
-
 	transformColumns(columns: string[] | azdata.TableColumn[]): Slick.Column<any>[] {
 		let tableColumns: any[] = <any[]>columns;
 		if (tableColumns) {
@@ -238,6 +233,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 				}
 			});
 		}
+		this.baseInit();
 	}
 
 	public validate(): Thenable<boolean> {

src/sql/workbench/browser/modelComponents/text.component.ts

@@ -51,12 +51,9 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-	}
-
 	ngAfterViewInit(): void {
 		this.updateText();
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {

src/sql/workbench/browser/modelComponents/toolbarContainer.component.ts

@@ -63,7 +63,7 @@ export default class ToolbarContainer extends ContainerBase<ToolbarItemConfig> i
 		this._orientation = Orientation.Horizontal;
 	}
 
-	ngOnInit(): void {
+	ngAfterViewInit(): void {
 		this.baseInit();
 	}
 
@@ -71,9 +71,6 @@ export default class ToolbarContainer extends ContainerBase<ToolbarItemConfig> i
 		this.baseDestroy();
 	}
 
-	ngAfterViewInit(): void {
-	}
-
 	/// IComponent implementation
 
 	public setLayout(layout: ToolbarLayout): void {

src/sql/workbench/browser/modelComponents/tree.component.ts

@@ -62,15 +62,11 @@ export default class TreeComponent extends ComponentBase<azdata.TreeProperties>
 		super(changeRef, el);
 	}
 
-	ngOnInit(): void {
-		this.baseInit();
-
-	}
-
 	ngAfterViewInit(): void {
 		if (this._inputContainer) {
 			this.createTreeControl();
 		}
+		this.baseInit();
 	}
 
 	ngOnDestroy(): void {