Hide page size on tables refactoring

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #attributeTableContainer class="mat-padding tb-entity-table tb-absolute-fill">
+<div class="mat-padding tb-entity-table tb-absolute-fill">
   <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="mode === 'default' && !textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss

@@ -18,6 +18,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-entity-table {
     .tb-entity-table-content {
       width: 100%;

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -111,6 +111,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   pageLink: PageLink;
   textSearchMode = false;
   dataSource: AttributeDatasource;
+  hidePageSize = false;
 
   activeValue = false;
   dirtyValue = false;
@@ -129,10 +130,14 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   aliasController: IAliasController;
   private widgetDatasource: Datasource;
 
+  private widgetResize$: ResizeObserver;
+
   private disableAttributeScopeSelectionValue: boolean;
+
   get disableAttributeScopeSelection(): boolean {
     return this.disableAttributeScopeSelectionValue;
   }
+
   @Input()
   set disableAttributeScopeSelection(value: boolean) {
     this.disableAttributeScopeSelectionValue = coerceBooleanProperty(value);
@@ -168,15 +173,11 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   @Input()
   entityName: string;
 
-  @ViewChild('attributeTableContainer', {static: true}) attributeTableContainerRef: ElementRef;
   @ViewChild('searchInput') searchInputField: ElementRef;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  public hidePageSize = false;
-  private widgetResize$: ResizeObserver;
-
   constructor(protected store: Store<AppState>,
               private attributeService: AttributeService,
               private telemetryWsService: TelemetryWebsocketService,
@@ -190,7 +191,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
               private dashboardUtils: DashboardUtilsService,
               private widgetService: WidgetService,
               private zone: NgZone,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private elementRef: ElementRef) {
     super(store);
     this.dirtyValue = !this.activeValue;
     const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
@@ -200,13 +202,13 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
 
   ngOnInit() {
     this.widgetResize$ = new ResizeObserver(() => {
-      const showHidePageSize = this.attributeTableContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
       if (showHidePageSize !== this.hidePageSize) {
         this.hidePageSize = showHidePageSize;
-        this.cd.detectChanges();
+        this.cd.markForCheck();
       }
     });
-    this.widgetResize$.observe(this.attributeTableContainerRef.nativeElement);
+    this.widgetResize$.observe(this.elementRef.nativeElement);
   }
 
   ngOnDestroy() {

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -32,7 +32,7 @@
     </tb-entity-details-panel>
   </mat-drawer>
   <mat-drawer-content>
-    <div #entitiesTableContainer class="mat-padding tb-entity-table tb-absolute-fill">
+    <div class="mat-padding tb-entity-table tb-absolute-fill">
       <div fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
         <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">

ui-ngx/src/app/modules/home/components/entity/entities-table.component.scss

@@ -18,6 +18,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-entity-table {
     .tb-entity-table-content {
       width: 100%;

ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts

@@ -43,7 +43,8 @@ import { TranslateService } from '@ngx-translate/core';
 import { BaseData, HasId } from '@shared/models/base-data';
 import { ActivatedRoute } from '@angular/router';
 import {
-  CellActionDescriptor, CellActionDescriptorType,
+  CellActionDescriptor,
+  CellActionDescriptorType,
   EntityActionTableColumn,
   EntityColumn,
   EntityTableColumn,
@@ -55,11 +56,7 @@ import { EntityTypeTranslation } from '@shared/models/entity-type.models';
 import { DialogService } from '@core/services/dialog.service';
 import { AddEntityDialogComponent } from './add-entity-dialog.component';
 import { AddEntityDialogData, EntityAction } from '@home/models/entity/entity-component.models';
-import {
+import { calculateIntervalStartEndTime, HistoryWindowType, Timewindow } from '@shared/models/time/time.models';
-  calculateIntervalStartEndTime,
-  HistoryWindowType,
-  Timewindow
-} from '@shared/models/time/time.models';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { isDefined, isUndefined } from '@core/utils';
@@ -100,6 +97,7 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
 
   defaultPageSize = 10;
   displayPagination = true;
+  hidePageSize = false;
   pageSizeOptions;
   pageLink: PageLink;
   textSearchMode = false;
@@ -111,8 +109,6 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
   isDetailsOpen = false;
   detailsPanelOpened = new EventEmitter<boolean>();
 
-  @ViewChild('entitiesTableContainer', {static: true}) entitiesTableContainerRef: ElementRef;
-
   @ViewChild('entityTableHeader', {static: true}) entityTableHeaderAnchor: TbAnchorComponent;
 
   @ViewChild('searchInput') searchInputField: ElementRef;
@@ -125,7 +121,6 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
   private viewInited = false;
 
   private widgetResize$: ResizeObserver;
-  public hidePageSize = false;
 
   constructor(protected store: Store<AppState>,
               public route: ActivatedRoute,
@@ -134,7 +129,8 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
               private dialogService: DialogService,
               private domSanitizer: DomSanitizer,
               private cd: ChangeDetectorRef,
-              private componentFactoryResolver: ComponentFactoryResolver) {
+              private componentFactoryResolver: ComponentFactoryResolver,
+              private elementRef: ElementRef) {
     super(store);
   }
 
@@ -145,13 +141,13 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
       this.init(this.route.snapshot.data.entitiesTableConfig);
     }
     this.widgetResize$ = new ResizeObserver(() => {
-      const showHidePageSize = this.entitiesTableContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
       if (showHidePageSize !== this.hidePageSize) {
         this.hidePageSize = showHidePageSize;
-        this.cd.detectChanges();
+        this.cd.markForCheck();
       }
     });
-    this.widgetResize$.observe(this.entitiesTableContainerRef.nativeElement);
+    this.widgetResize$.observe(this.elementRef.nativeElement);
   }
 
   ngOnDestroy() {

ui-ngx/src/app/modules/home/components/relation/relation-table.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #relationTableContainer class="mat-padding tb-entity-table tb-absolute-fill">
+<div class="mat-padding tb-entity-table tb-absolute-fill">
   <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
       <div class="mat-toolbar-tools">

ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss

@@ -18,6 +18,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-entity-table {
     .tb-entity-table-content {
       width: 100%;

ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts

@@ -67,6 +67,7 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
   displayedColumns: string[];
   direction: EntitySearchDirection;
   pageLink: PageLink;
+  hidePageSize = false;
   textSearchMode = false;
   dataSource: RelationsDatasource;
 
@@ -77,7 +78,6 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
   viewsInited = false;
 
   private widgetResize$: ResizeObserver;
-  public hidePageSize = false;
 
   @Input()
   set active(active: boolean) {
@@ -105,7 +105,6 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
     }
   }
 
-  @ViewChild('relationTableContainer', {static: true}) relationTableContainerRef: ElementRef;
   @ViewChild('searchInput') searchInputField: ElementRef;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -116,7 +115,8 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
               public translate: TranslateService,
               public dialog: MatDialog,
               private dialogService: DialogService,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private elementRef: ElementRef) {
     super(store);
     this.dirtyValue = !this.activeValue;
     const sortOrder: SortOrder = { property: 'type', direction: Direction.ASC };
@@ -128,13 +128,13 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
 
   ngOnInit() {
     this.widgetResize$ = new ResizeObserver(() => {
-      const showHidePageSize = this.relationTableContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
       if (showHidePageSize !== this.hidePageSize) {
         this.hidePageSize = showHidePageSize;
-        this.cd.detectChanges();
+        this.cd.markForCheck();
       }
     });
-    this.widgetResize$.observe(this.relationTableContainerRef.nativeElement);
+    this.widgetResize$.observe(this.elementRef.nativeElement);
   }
 
   ngOnDestroy() {

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #manageActionWidgetContainer class="mat-padding tb-entity-table tb-absolute-fill">
+<div class="mat-padding tb-entity-table tb-absolute-fill">
   <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode">
       <div class="mat-toolbar-tools">
@@ -119,6 +119,7 @@
     <mat-paginator [length]="dataSource.total() | async"
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
-                   [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
+                   [pageSizeOptions]="[10, 20, 30]"
+                   [hidePageSize]="hidePageSize"></mat-paginator>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.scss

@@ -16,6 +16,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-entity-table {
     .tb-entity-table-content {
       width: 100%;

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts

@@ -46,13 +46,12 @@ import {
   WidgetActionsDatasource
 } from '@home/components/widget/action/manage-widget-actions.component.models';
 import { UtilsService } from '@core/services/utils.service';
-import { WidgetActionDescriptor, WidgetActionSource } from '@shared/models/widget.models';
+import { WidgetActionDescriptor, WidgetActionSource, widgetType } from '@shared/models/widget.models';
 import {
   WidgetActionDialogComponent,
   WidgetActionDialogData
 } from '@home/components/widget/action/widget-action-dialog.component';
 import { deepClone } from '@core/utils';
-import { widgetType } from '@shared/models/widget.models';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 
@@ -81,14 +80,14 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
   displayedColumns: string[];
   pageLink: PageLink;
   textSearchMode = false;
+  hidePageSize = false;
   dataSource: WidgetActionsDatasource;
 
   viewsInited = false;
   dirtyValue = false;
-  public hidePageSize = false;
+
   private widgetResize$: ResizeObserver;
 
-  @ViewChild('manageActionWidgetContainer', {static: true}) manageActionWidgetContainerRef: ElementRef;
   @ViewChild('searchInput') searchInputField: ElementRef;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -101,7 +100,8 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
               private utils: UtilsService,
               private dialog: MatDialog,
               private dialogs: DialogService,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private elementRef: ElementRef) {
     super(store);
     const sortOrder: SortOrder = { property: 'actionSourceName', direction: Direction.ASC };
     this.pageLink = new PageLink(10, 0, null, sortOrder);
@@ -111,13 +111,13 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
 
   ngOnInit(): void {
     this.widgetResize$ = new ResizeObserver(() => {
-      const showHidePageSize = this.manageActionWidgetContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
       if (showHidePageSize !== this.hidePageSize) {
         this.hidePageSize = showHidePageSize;
-        this.cd.detectChanges();
+        this.cd.markForCheck();
       }
     });
-    this.widgetResize$.observe(this.manageActionWidgetContainerRef.nativeElement);
+    this.widgetResize$.observe(this.elementRef.nativeElement);
   }
 
   ngOnDestroy(): void {

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #alarmWidgetContainer class="tb-table-widget tb-absolute-fill">
+<div class="tb-table-widget tb-absolute-fill">
   <div fxFlex fxLayout="column" class="tb-absolute-fill">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && alarmsDatasource.selection.isEmpty()">
       <div class="mat-toolbar-tools">

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss

@@ -16,6 +16,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-table-widget {
     .table-container {
       position: relative;

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts

@@ -16,6 +16,7 @@
 
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -154,7 +155,6 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   @Input()
   ctx: WidgetContext;
 
-  @ViewChild('alarmWidgetContainer', {static: true}) alarmWidgetContainerRef: ElementRef;
   @ViewChild('searchInput') searchInputField: ElementRef;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -167,11 +167,11 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   public pageLink: AlarmDataPageLink;
   public sortOrderProperty: string;
   public textSearchMode = false;
+  public hidePageSize = false;
   public columns: Array<EntityColumn> = [];
   public displayedColumns: string[] = [];
   public alarmsDatasource: AlarmsDatasource;
   public noDataDisplayMessageText: string;
-  public hidePageSize = false;
   private setCellButtonAction: boolean;
 
   private cellContentCache: Array<any> = [];
@@ -240,7 +240,8 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
               private datePipe: DatePipe,
               private dialog: MatDialog,
               private dialogService: DialogService,
-              private alarmService: AlarmService) {
+              private alarmService: AlarmService,
+              private cd: ChangeDetectorRef) {
     super(store);
     this.pageLink = {
       page: 0,
@@ -263,13 +264,13 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
         () => this.pageLink.page = 0
       );
       this.widgetResize$ = new ResizeObserver(() => {
-        const showHidePageSize = this.alarmWidgetContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
         if (showHidePageSize !== this.hidePageSize) {
           this.hidePageSize = showHidePageSize;
-          this.ctx.detectChanges();
+          this.cd.markForCheck();
         }
       });
-      this.widgetResize$.observe(this.alarmWidgetContainerRef.nativeElement);
+      this.widgetResize$.observe(this.elementRef.nativeElement);
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #entitiesWidgetContainer class="tb-table-widget tb-absolute-fill">
+<div class="tb-table-widget tb-absolute-fill">
   <div fxFlex fxLayout="column" class="tb-absolute-fill">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode">
       <div class="mat-toolbar-tools">

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.scss

@@ -16,6 +16,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-table-widget {
     .table-container {
       position: relative;

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts

@@ -16,6 +16,7 @@
 
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   Injector,
@@ -131,7 +132,6 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   @Input()
   ctx: WidgetContext;
 
-  @ViewChild('entitiesWidgetContainer', {static: true}) entitiesWidgetContainerRef: ElementRef;
   @ViewChild('searchInput') searchInputField: ElementRef;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -143,11 +143,11 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   public pageLink: EntityDataPageLink;
   public sortOrderProperty: string;
   public textSearchMode = false;
+  public hidePageSize = false;
   public columns: Array<EntityColumn> = [];
   public displayedColumns: string[] = [];
   public entityDatasource: EntityDatasource;
   public noDataDisplayMessageText: string;
-  public hidePageSize = false;
   private setCellButtonAction: boolean;
 
   private cellContentCache: Array<any> = [];
@@ -198,7 +198,8 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
               private utils: UtilsService,
               private datePipe: DatePipe,
               private translate: TranslateService,
-              private domSanitizer: DomSanitizer) {
+              private domSanitizer: DomSanitizer,
+              private cd: ChangeDetectorRef) {
     super(store);
     this.pageLink = {
       page: 0,
@@ -218,13 +219,13 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     this.ctx.updateWidgetParams();
     if (this.displayPagination) {
       this.widgetResize$ = new ResizeObserver(() => {
-        const showHidePageSize = this.entitiesWidgetContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
         if (showHidePageSize !== this.hidePageSize) {
           this.hidePageSize = showHidePageSize;
-          this.ctx.detectChanges();
+          this.cd.markForCheck();
         }
       });
-      this.widgetResize$.observe(this.entitiesWidgetContainerRef.nativeElement);
+      this.widgetResize$.observe(this.elementRef.nativeElement);
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div #timeseriesWidgetContainer class="tb-table-widget tb-absolute-fill">
+<div class="tb-table-widget tb-absolute-fill">
   <div fxFlex fxLayout="column" class="tb-absolute-fill">
     <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode">
       <div class="mat-toolbar-tools">

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.scss

@@ -16,6 +16,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-table-widget {
     mat-footer-row, mat-row {
       height: 38px;

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@@ -16,6 +16,7 @@
 
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   Input,
@@ -117,7 +118,6 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   @Input()
   ctx: WidgetContext;
 
-  @ViewChild('timeseriesWidgetContainer', {static: true}) timeseriesWidgetContainerRef: ElementRef;
   @ViewChild('searchInput') searchInputField: ElementRef;
   @ViewChildren(MatPaginator) paginators: QueryList<MatPaginator>;
   @ViewChildren(MatSort) sorts: QueryList<MatSort>;
@@ -127,11 +127,11 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   public enableStickyAction = true;
   public pageSizeOptions;
   public textSearchMode = false;
+  public hidePageSize = false;
   public textSearch: string = null;
   public sources: TimeseriesTableSource[];
   public sourceIndex: number;
   public noDataDisplayMessageText: string;
-  public hidePageSize = false;
   private setCellButtonAction: boolean;
 
   private cellContentCache: Array<any> = [];
@@ -172,7 +172,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
               private utils: UtilsService,
               private translate: TranslateService,
               private domSanitizer: DomSanitizer,
-              private datePipe: DatePipe) {
+              private datePipe: DatePipe,
+              private cd: ChangeDetectorRef) {
     super(store);
   }
 
@@ -196,13 +197,13 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
         }
       );
       this.widgetResize$ = new ResizeObserver(() => {
-        const showHidePageSize = this.timeseriesWidgetContainerRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
         if (showHidePageSize !== this.hidePageSize) {
           this.hidePageSize = showHidePageSize;
-          this.ctx.detectChanges();
+          this.cd.markForCheck();
         }
       });
-      this.widgetResize$.observe(this.timeseriesWidgetContainerRef.nativeElement);
+      this.widgetResize$.observe(this.elementRef.nativeElement);
     }
   }