From 61a5047e34a43a81322dfd4a9ec777980f544d98 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 26 May 2021 15:17:03 +0300 Subject: [PATCH] UI: Performance improvements by using On Push change detection strategy on top level components --- ui-ngx/src/app/modules/home/menu/menu-link.component.ts | 5 +++-- ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts | 5 +++-- ui-ngx/src/app/modules/home/menu/side-menu.component.ts | 5 +++-- .../modules/home/pages/home-links/home-links.component.ts | 7 +++++-- ui-ngx/src/app/shared/components/breadcrumb.component.ts | 5 +++-- ui-ngx/src/app/shared/components/user-menu.component.ts | 5 +++-- 6 files changed, 20 insertions(+), 12 deletions(-) diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.ts b/ui-ngx/src/app/modules/home/menu/menu-link.component.ts index a0000e40be..58724b89f9 100644 --- a/ui-ngx/src/app/modules/home/menu/menu-link.component.ts +++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.ts @@ -14,13 +14,14 @@ /// limitations under the License. /// -import { Component, Input, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import { MenuSection } from '@core/services/menu.models'; @Component({ selector: 'tb-menu-link', templateUrl: './menu-link.component.html', - styleUrls: ['./menu-link.component.scss'] + styleUrls: ['./menu-link.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class MenuLinkComponent implements OnInit { diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts index a3afd99508..6bbc5414fe 100644 --- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts +++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts @@ -14,14 +14,15 @@ /// limitations under the License. /// -import { Component, Input, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import { MenuSection } from '@core/services/menu.models'; import { Router } from '@angular/router'; @Component({ selector: 'tb-menu-toggle', templateUrl: './menu-toggle.component.html', - styleUrls: ['./menu-toggle.component.scss'] + styleUrls: ['./menu-toggle.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class MenuToggleComponent implements OnInit { diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.ts b/ui-ngx/src/app/modules/home/menu/side-menu.component.ts index aa96b517f9..c2b974cd6b 100644 --- a/ui-ngx/src/app/modules/home/menu/side-menu.component.ts +++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.ts @@ -14,14 +14,15 @@ /// limitations under the License. /// -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { MenuService } from '@core/services/menu.service'; import { MenuSection } from '@core/services/menu.models'; @Component({ selector: 'tb-side-menu', templateUrl: './side-menu.component.html', - styleUrls: ['./side-menu.component.scss'] + styleUrls: ['./side-menu.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class SideMenuComponent implements OnInit { diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.ts b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.ts index 7f485df45c..79accbe99b 100644 --- a/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.ts +++ b/ui-ngx/src/app/modules/home/pages/home-links/home-links.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { MenuService } from '@core/services/menu.service'; import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { MediaBreakpoints } from '@shared/models/constants'; @@ -25,7 +25,8 @@ import { HomeDashboard } from '@shared/models/dashboard.models'; @Component({ selector: 'tb-home-links', templateUrl: './home-links.component.html', - styleUrls: ['./home-links.component.scss'] + styleUrls: ['./home-links.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class HomeLinksComponent implements OnInit { @@ -37,6 +38,7 @@ export class HomeLinksComponent implements OnInit { constructor(private menuService: MenuService, public breakpointObserver: BreakpointObserver, + private cd: ChangeDetectorRef, private route: ActivatedRoute) { } @@ -57,6 +59,7 @@ export class HomeLinksComponent implements OnInit { if (this.breakpointObserver.isMatched(MediaBreakpoints['gt-lg'])) { this.cols = 4; } + this.cd.detectChanges(); } sectionColspan(section: HomeSection): number { diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.ts b/ui-ngx/src/app/shared/components/breadcrumb.component.ts index c967c3815e..3fd2f05ff3 100644 --- a/ui-ngx/src/app/shared/components/breadcrumb.component.ts +++ b/ui-ngx/src/app/shared/components/breadcrumb.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core'; import { BehaviorSubject, Subject } from 'rxjs'; import { BreadCrumb, BreadCrumbConfig } from './breadcrumb'; import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router'; @@ -25,7 +25,8 @@ import { guid } from '@core/utils'; @Component({ selector: 'tb-breadcrumb', templateUrl: './breadcrumb.component.html', - styleUrls: ['./breadcrumb.component.scss'] + styleUrls: ['./breadcrumb.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class BreadcrumbComponent implements OnInit, OnDestroy { diff --git a/ui-ngx/src/app/shared/components/user-menu.component.ts b/ui-ngx/src/app/shared/components/user-menu.component.ts index 8598eed5d8..f27f272195 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.ts +++ b/ui-ngx/src/app/shared/components/user-menu.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core'; import { User } from '@shared/models/user.model'; import { Authority } from '@shared/models/authority.enum'; import { select, Store } from '@ngrx/store'; @@ -27,7 +27,8 @@ import { Router } from '@angular/router'; @Component({ selector: 'tb-user-menu', templateUrl: './user-menu.component.html', - styleUrls: ['./user-menu.component.scss'] + styleUrls: ['./user-menu.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class UserMenuComponent implements OnInit, OnDestroy {