UI: Apply angular zone on resize observer callback when necessary.

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -471,7 +471,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   ngAfterViewInit() {
     this.dashboardResize$ = new ResizeObserver(() => {
-      this.updateLayoutSizes();
+      this.ngZone.run(() => {
+        this.updateLayoutSizes();
+      });
     });
     this.dashboardResize$.observe(this.dashboardContainer.nativeElement);
     if (!this.widgetEditMode && !this.readonly && this.dashboardUtils.isEmptyDashboard(this.dashboard)) {

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

@@ -361,7 +361,9 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
 
   ngAfterViewInit(): void {
     this.gridsterResize$ = new ResizeObserver(() => {
-      this.onGridsterParentResize();
+      this.ngZone.run(() => {
+        this.onGridsterParentResize();
+      });
     });
     this.gridsterResize$.observe(this.gridster.el.parentElement);
   }

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

@@ -22,7 +22,7 @@ import {
   ComponentFactoryResolver,
   ElementRef,
   EventEmitter,
-  Input,
+  Input, NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -142,7 +142,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
               private router: Router,
               private componentFactoryResolver: ComponentFactoryResolver,
               private elementRef: ElementRef,
-              private fb: FormBuilder) {
+              private fb: FormBuilder,
+              private zone: NgZone) {
     super(store);
   }
 
@@ -157,11 +158,13 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
       });
     }
     this.widgetResize$ = new ResizeObserver(() => {
-      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
-      if (showHidePageSize !== this.hidePageSize) {
-        this.hidePageSize = showHidePageSize;
-        this.cd.markForCheck();
-      }
+      this.zone.run(() => {
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.cd.markForCheck();
+        }
+      });
     });
     this.widgetResize$.observe(this.elementRef.nativeElement);
   }

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

@@ -20,7 +20,7 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  Input,
+  Input, NgZone,
   OnDestroy,
   OnInit,
   ViewChild
@@ -121,7 +121,8 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
               private dialogService: DialogService,
               private cd: ChangeDetectorRef,
               private elementRef: ElementRef,
-              private fb: FormBuilder) {
+              private fb: FormBuilder,
+              private zone: NgZone) {
     super(store);
     this.dirtyValue = !this.activeValue;
     const sortOrder: SortOrder = { property: 'type', direction: Direction.ASC };
@@ -133,11 +134,13 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
 
   ngOnInit() {
     this.widgetResize$ = new ResizeObserver(() => {
-      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
-      if (showHidePageSize !== this.hidePageSize) {
-        this.hidePageSize = showHidePageSize;
-        this.cd.markForCheck();
-      }
+      this.zone.run(() => {
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.cd.markForCheck();
+        }
+      });
     });
     this.widgetResize$.observe(this.elementRef.nativeElement);
   }

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

@@ -20,7 +20,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  Input,
+  Input, NgZone,
   OnDestroy,
   OnInit,
   Output,
@@ -141,7 +141,8 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
               private cd: ChangeDetectorRef,
               private viewContainerRef: ViewContainerRef,
               private elementRef: ElementRef,
-              private fb: FormBuilder) {
+              private fb: FormBuilder,
+              private zone: NgZone) {
     super(store);
     this.dirtyValue = !this.activeValue;
     const sortOrder: SortOrder = { property: 'timestamp', direction: Direction.DESC };
@@ -151,11 +152,13 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
 
   ngOnInit() {
     this.componentResize$ = new ResizeObserver(() => {
-      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
-      if (showHidePageSize !== this.hidePageSize) {
-        this.hidePageSize = showHidePageSize;
-        this.cd.markForCheck();
-      }
+      this.zone.run(() => {
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.cd.markForCheck();
+        }
+      });
     });
     this.componentResize$.observe(this.elementRef.nativeElement);
     this.isReadOnly = this.adminService.getRepositorySettingsInfo().pipe(map(settings => settings.readOnly));

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

@@ -20,7 +20,7 @@ import {
   Component,
   ElementRef,
   forwardRef,
-  Input,
+  Input, NgZone,
   OnDestroy,
   OnInit,
   ViewChild
@@ -105,7 +105,8 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
               private dialog: MatDialog,
               private dialogs: DialogService,
               private cd: ChangeDetectorRef,
-              private elementRef: ElementRef) {
+              private elementRef: ElementRef,
+              private zone: NgZone) {
     super(store);
     const sortOrder: SortOrder = { property: 'actionSourceName', direction: Direction.ASC };
     this.pageLink = new PageLink(10, 0, null, sortOrder);
@@ -115,11 +116,13 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
 
   ngOnInit(): void {
     this.widgetResize$ = new ResizeObserver(() => {
-      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
-      if (showHidePageSize !== this.hidePageSize) {
-        this.hidePageSize = showHidePageSize;
-        this.cd.markForCheck();
-      }
+      this.zone.run(() => {
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.cd.markForCheck();
+        }
+      });
     });
     this.widgetResize$.observe(this.elementRef.nativeElement);
   }

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

@@ -273,11 +273,13 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
         () => this.pageLink.page = 0
       );
       this.widgetResize$ = new ResizeObserver(() => {
-        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
-        if (showHidePageSize !== this.hidePageSize) {
-          this.hidePageSize = showHidePageSize;
-          this.cd.markForCheck();
-        }
+        this.ngZone.run(() => {
+          const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+          if (showHidePageSize !== this.hidePageSize) {
+            this.hidePageSize = showHidePageSize;
+            this.cd.markForCheck();
+          }
+        });
       });
       this.widgetResize$.observe(this.elementRef.nativeElement);
     }

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

@@ -220,11 +220,13 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     this.ctx.updateWidgetParams();
     if (this.displayPagination) {
       this.widgetResize$ = new ResizeObserver(() => {
-        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
-        if (showHidePageSize !== this.hidePageSize) {
-          this.hidePageSize = showHidePageSize;
-          this.cd.markForCheck();
-        }
+        this.ngZone.run(() => {
+          const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+          if (showHidePageSize !== this.hidePageSize) {
+            this.hidePageSize = showHidePageSize;
+            this.cd.markForCheck();
+          }
+        });
       });
       this.widgetResize$.observe(this.elementRef.nativeElement);
     }

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { AppState } from '@core/core.state';
 import { Store } from '@ngrx/store';
@@ -81,7 +81,8 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
               private utilsService: UtilsService,
               private elementRef: ElementRef,
               private imagePipe: ImagePipe,
-              private sanitizer: DomSanitizer,) {
+              private sanitizer: DomSanitizer,
+              private zone: NgZone) {
     super(store);
   }
 
@@ -101,11 +102,13 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
         }
 
         this.widgetResize$ = new ResizeObserver(() => {
-          const showHideBadgeContainer = this.elementRef.nativeElement.offsetWidth > 250;
-          if (showHideBadgeContainer !== this.showBadgeContainer) {
-            this.showBadgeContainer = showHideBadgeContainer;
-            this.cd.markForCheck();
-          }
+          this.zone.run(() => {
+            const showHideBadgeContainer = this.elementRef.nativeElement.offsetWidth > 250;
+            if (showHideBadgeContainer !== this.showBadgeContainer) {
+              this.showBadgeContainer = showHideBadgeContainer;
+              this.cd.markForCheck();
+            }
+          });
         });
 
         this.widgetResize$.observe(this.elementRef.nativeElement);

ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts

@@ -189,7 +189,9 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
     this.buildForm();
     this.ctx.updateWidgetParams();
     this.formResize$ = new ResizeObserver(() => {
-      this.resize();
+      this.ngZone.run(() => {
+        this.resize();
+      });
     });
     this.formResize$.observe(this.formContainerRef.nativeElement);
   }

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

@@ -15,11 +15,12 @@
 ///
 
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
   Injector,
-  Input,
+  Input, NgZone, OnDestroy,
   OnInit,
   StaticProvider,
   ViewChild,
@@ -100,7 +101,7 @@ interface PersistentTableWidgetActionDescriptor extends TableCellButtonActionDes
   styleUrls: ['./persistent-table.component.scss' , '../table-widget.scss']
 })
 
-export class PersistentTableComponent extends PageComponent implements OnInit {
+export class PersistentTableComponent extends PageComponent implements OnInit, OnDestroy, AfterViewInit {
 
   @Input()
   ctx: WidgetContext;
@@ -144,7 +145,8 @@ export class PersistentTableComponent extends PageComponent implements OnInit {
               private dialogService: DialogService,
               private deviceService: DeviceService,
               private dialog: MatDialog,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private zone: NgZone) {
     super(store);
   }
 
@@ -158,11 +160,13 @@ export class PersistentTableComponent extends PageComponent implements OnInit {
     this.ctx.updateWidgetParams();
     if (this.displayPagination) {
       this.widgetResize$ = new ResizeObserver(() => {
-        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
-        if (showHidePageSize !== this.hidePageSize) {
-          this.hidePageSize = showHidePageSize;
-          this.cd.markForCheck();
-        }
+        this.zone.run(() => {
+          const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+          if (showHidePageSize !== this.hidePageSize) {
+            this.hidePageSize = showHidePageSize;
+            this.cd.markForCheck();
+          }
+        });
       });
       this.widgetResize$.observe(this.elementRef.nativeElement);
     }

ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts

@@ -1218,8 +1218,8 @@ class CssScadaSymbolAnimation implements ScadaSymbolAnimation {
     return this;
   }
 
-  public ease(easing: string): this {
-    this._easing = easing;
+  public ease(easing: string | EasingLiteral): this {
+    this._easing = this.easingLiteralToCssEasing(easing);
     this.updateAnimationStyle('animation-timing-function', this._easing);
     return this;
   }
@@ -1566,6 +1566,21 @@ class CssScadaSymbolAnimation implements ScadaSymbolAnimation {
     return Math.round((num + Number.EPSILON) * factor) / factor;
   }
 
+  private easingLiteralToCssEasing(easing: string | EasingLiteral): string {
+    switch (easing) {
+      case '<>':
+        return 'ease-in-out';
+      case '-':
+        return 'linear';
+      case '>':
+        return 'ease-out';
+      case '<':
+        return 'ease-in';
+      default:
+        return easing;
+    }
+  }
+
 }
 
 class JsScadaSymbolAnimation implements ScadaSymbolAnimation {

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

@@ -20,7 +20,7 @@ import {
   Component,
   ElementRef,
   Injector,
-  Input,
+  Input, NgZone,
   OnDestroy,
   OnInit,
   QueryList,
@@ -224,7 +224,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
               private domSanitizer: DomSanitizer,
               private datePipe: DatePipe,
               private cd: ChangeDetectorRef,
-              private fb: FormBuilder) {
+              private fb: FormBuilder,
+              private zone: NgZone) {
     super(store);
   }
 
@@ -249,11 +250,13 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
         }
       );
       this.widgetResize$ = new ResizeObserver(() => {
-        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
-        if (showHidePageSize !== this.hidePageSize) {
-          this.hidePageSize = showHidePageSize;
-          this.cd.markForCheck();
-        }
+        this.zone.run(() => {
+          const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+          if (showHidePageSize !== this.hidePageSize) {
+            this.hidePageSize = showHidePageSize;
+            this.cd.markForCheck();
+          }
+        });
       });
       this.widgetResize$.observe(this.elementRef.nativeElement);
     }

ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts

@@ -18,16 +18,20 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component, ComponentRef,
+  Component,
+  ComponentRef,
   ElementRef,
   EventEmitter,
   HostBinding,
-  Input, NgZone, OnChanges,
+  Input,
+  OnChanges,
   OnDestroy,
   OnInit,
   Output,
-  Renderer2, SimpleChanges,
-  ViewChild, ViewContainerRef,
+  Renderer2,
+  SimpleChanges,
+  ViewChild,
+  ViewContainerRef,
   ViewEncapsulation
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
@@ -38,9 +42,9 @@ import { SafeStyle } from '@angular/platform-browser';
 import { isNotEmptyStr } from '@core/utils';
 import { GridsterItemComponent } from 'angular-gridster2';
 import { UtilsService } from '@core/services/utils.service';
-import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 import { from } from 'rxjs';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
+import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 
 export enum WidgetComponentActionType {
   MOUSE_DOWN,
@@ -134,8 +138,7 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
               private renderer: Renderer2,
               private container: ViewContainerRef,
               private dashboardUtils: DashboardUtilsService,
-              private utils: UtilsService,
-              private zone: NgZone) {
+              private utils: UtilsService) {
     super(store);
   }
 
@@ -307,26 +310,24 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
         }
       });
       this.editWidgetActionsTooltip = $(this.gridsterItem.el).tooltipster('instance');
-      this.zone.run(() => {
-        componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent);
-        componentRef.instance.container = this;
-        componentRef.instance.viewInited.subscribe(() => {
-          if (this.editWidgetActionsTooltip.status().open) {
-            this.editWidgetActionsTooltip.reposition();
-          }
-        });
-        this.editWidgetActionsTooltip.on('destroyed', () => {
-          componentRef.destroy();
-        });
-        const parentElement = componentRef.instance.element.nativeElement;
-        const content = parentElement.firstChild;
-        parentElement.removeChild(content);
-        parentElement.style.display = 'none';
-        this.editWidgetActionsTooltip.content(content);
-        this.updateEditWidgetActionsTooltipState();
-        this.widget.onSelected((selected) =>
-          this.updateEditWidgetActionsTooltipSelectedState(selected));
+      componentRef = this.container.createComponent(EditWidgetActionsTooltipComponent);
+      componentRef.instance.container = this;
+      componentRef.instance.viewInited.subscribe(() => {
+        if (this.editWidgetActionsTooltip.status().open) {
+          this.editWidgetActionsTooltip.reposition();
+        }
+      });
+      this.editWidgetActionsTooltip.on('destroyed', () => {
+        componentRef.destroy();
       });
+      const parentElement = componentRef.instance.element.nativeElement;
+      const content = parentElement.firstChild;
+      parentElement.removeChild(content);
+      parentElement.style.display = 'none';
+      this.editWidgetActionsTooltip.content(content);
+      this.updateEditWidgetActionsTooltipState();
+      this.widget.onSelected((selected) =>
+        this.updateEditWidgetActionsTooltipSelectedState(selected));
     });
   }
 

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

@@ -546,7 +546,9 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
           }
         });
       } else {
-        this.onInit(true);
+        this.ngZone.run(() => {
+          this.onInit(true);
+        });
       }
     }
   }

ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts

@@ -79,7 +79,7 @@ export class ScadaSymbolEditObject {
   constructor(private rootElement: HTMLElement,
               public tooltipsContainer: HTMLElement,
               public viewContainerRef: ViewContainerRef,
-              public zone: NgZone,
+              private zone: NgZone,
               private callbacks: ScadaSymbolEditObjectCallbacks,
               public readonly: boolean) {
     this.shapeResize$ = new ResizeObserver(() => {
@@ -194,7 +194,9 @@ export class ScadaSymbolEditObject {
       from(import('tooltipster')),
       from(import('tooltipster/dist/js/plugins/tooltipster/SVG/tooltipster-SVG.min.js'))
     ]).subscribe(() => {
-      this.setupElements();
+      this.zone.run(() => {
+        this.setupElements();
+      });
     });
   }
 
@@ -759,9 +761,7 @@ export class ScadaSymbolElement {
   }
 
   private setupTagPanel() {
-    this.editObject.zone.run(() => {
-      setupTagPanelTooltip(this, this.editObject.viewContainerRef);
-    });
+    setupTagPanelTooltip(this, this.editObject.viewContainerRef);
   }
 
   private createAddTagTooltip() {
@@ -809,9 +809,7 @@ export class ScadaSymbolElement {
   }
 
   private setupAddTagPanel() {
-    this.editObject.zone.run(() => {
-      setupAddTagPanelTooltip(this, this.editObject.viewContainerRef);
-    });
+    setupAddTagPanelTooltip(this, this.editObject.viewContainerRef);
   }
 
   private innerTagTooltipPosition(_instance: ITooltipsterInstance, helper: ITooltipsterHelper,

ui-ngx/src/app/shared/components/grid/scroll-grid.component.ts

@@ -17,7 +17,7 @@
 import {
   AfterViewInit, ChangeDetectorRef,
   Component,
-  Input,
+  Input, NgZone,
   OnChanges, OnDestroy,
   OnInit,
   Renderer2,
@@ -90,7 +90,8 @@ export class ScrollGridComponent<T, F> implements OnInit, AfterViewInit, OnChang
 
   constructor(private breakpointObserver: BreakpointObserver,
               private cd: ChangeDetectorRef,
-              private renderer: Renderer2) {
+              private renderer: Renderer2,
+              private zone: NgZone) {
   }
 
   ngOnInit(): void {
@@ -109,7 +110,9 @@ export class ScrollGridComponent<T, F> implements OnInit, AfterViewInit, OnChang
     this.renderer.setStyle(this.viewport._contentWrapper.nativeElement, 'padding', this.gap + 'px');
     if (!(typeof this.itemSize === 'number')) {
       this.contentResize$ = new ResizeObserver(() => {
-        this.onContentResize();
+        this.zone.run(() => {
+          this.onContentResize();
+        });
       });
       this.contentResize$.observe(this.viewport._contentWrapper.nativeElement);
     }

ui-ngx/src/app/shared/components/image/image-gallery.component.ts

@@ -33,7 +33,7 @@ import {
   ElementRef,
   EventEmitter,
   HostBinding,
-  Input,
+  Input, NgZone,
   OnDestroy,
   OnInit,
   Output,
@@ -196,7 +196,8 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe
               private importExportService: ImportExportService,
               private elementRef: ElementRef,
               private cd: ChangeDetectorRef,
-              private fb: FormBuilder) {
+              private fb: FormBuilder,
+              private zone: NgZone) {
     super(store);
 
     this.gridImagesFetchFunction = (pageSize, page, filter) => {
@@ -361,11 +362,13 @@ export class ImageGalleryComponent extends PageComponent implements OnInit, OnDe
   private initListMode() {
     this.destroyListMode$ = new Subject<void>();
     this.widgetResize$ = new ResizeObserver(() => {
-      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
-      if (showHidePageSize !== this.hidePageSize) {
-        this.hidePageSize = showHidePageSize;
-        this.cd.markForCheck();
-      }
+      this.zone.run(() => {
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.cd.markForCheck();
+        }
+      });
     });
     this.widgetResize$.observe(this.elementRef.nativeElement);
     if (this.pageMode) {

ui-ngx/src/app/shared/components/toggle-header.component.ts

@@ -25,7 +25,7 @@ import {
   ElementRef,
   EventEmitter,
   HostBinding,
-  Input,
+  Input, NgZone,
   OnDestroy,
   OnInit,
   Output,
@@ -213,7 +213,8 @@ export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterV
   constructor(protected store: Store<AppState>,
               private cd: ChangeDetectorRef,
               private platform: Platform,
-              private breakpointObserver: BreakpointObserver) {
+              private breakpointObserver: BreakpointObserver,
+              private zone: NgZone) {
     super(store);
   }
 
@@ -296,7 +297,9 @@ export class ToggleHeaderComponent extends _ToggleBase implements OnInit, AfterV
 
   private startObservePagination() {
     this.toggleGroupResize$ = new ResizeObserver(() => {
-      this.updatePagination();
+      this.zone.run(() => {
+        this.updatePagination();
+      });
     });
     this.toggleGroupResize$.observe(this.toggleGroupContainer.nativeElement);
   }