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

@@ -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 {
 

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 {
 

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 {
 

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 {

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 {
 

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 {