refactor: remove eager change detection strategy. Defaults to onPush

Author: mddragnev

projects/app-crm/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, DOCUMENT, inject } from '@angular/core';
 import { SEOService } from '../../../app-lob/src/app/seo.service';
 import { RouterOutlet } from '@angular/router';
 
@@ -7,7 +7,6 @@ import { RouterOutlet } from '@angular/router';
     selector: 'app-root',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RouterOutlet]
 })
 export class AppComponent implements OnInit {

projects/app-crm/src/app/grid-crm/grid-crm.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { CloseScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, IgxSummaryResult, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core';
 import { CellType, GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent, IgxDateSummaryOperand, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxNumberSummaryOperand, IColumnExportingEventArgs, IgxCsvExporterService, IgxExcelExporterService } from 'igniteui-angular/grids/core';
@@ -75,7 +75,6 @@ class SoonSummary extends IgxDateSummaryOperand {
     selector: 'app-grid',
     styleUrls: ['./grid-crm.component.scss'],
     templateUrl: './grid-crm.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent]
 })
 export class GridCRMComponent implements OnInit, AfterViewInit {

projects/app-lob/src/app/app.component.ts

@@ -1,5 +1,5 @@
 
-import { Component, HostListener, OnInit, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, HostListener, OnInit, DOCUMENT, inject } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { filter, map, mergeMap } from 'rxjs/operators';
 import { SEOService } from './seo.service';
@@ -8,7 +8,6 @@ import { SEOService } from './seo.service';
     selector: 'app-root',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RouterOutlet]
 })
 export class AppComponent implements OnInit {

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import { AfterViewInit, ChangeDetectorRef, ViewContainerRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, OnInit, Pipe, PipeTransform, QueryList, ViewChild, ViewChildren, TemplateRef, inject, ChangeDetectionStrategy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ViewContainerRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, OnInit, Pipe, PipeTransform, QueryList, ViewChild, ViewChildren, TemplateRef, inject } from '@angular/core';
 import { IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, OPTIONS_TYPE, CHART_TYPE, IDeterminedChartTypesArgs } from 'igniteui-angular-extras';
 import { IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPane, IgcSplitPaneOrientation } from 'igniteui-dockmanager';
 import { FinancialData } from '../../data/financialData';
@@ -58,7 +58,6 @@ export class HastDuplicateLayouts implements PipeTransform {
     styleUrls: ['./data-analysis-dock-manager.component.scss'],
     providers: [FloatingPanesService],
     imports: [IgxGridComponent, IgxConditionalFormattingDirective, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts],
-    changeDetection: ChangeDetectionStrategy.Eager,
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/dock-slot/dock-slot.component.ts

@@ -1,11 +1,10 @@
-import { Component, HostBinding, Input, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { Component, HostBinding, Input, OnInit, ViewChild } from '@angular/core';
 import { ChartHostDirective } from '../../directives/chart-integration/chart-integration.directive';
 
 @Component({
     selector: 'app-dock-slot',
     templateUrl: './dock-slot.component.html',
     styleUrls: ['./dock-slot.component.scss'],
-    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [ChartHostDirective]
 })
 export class DockSlotComponent implements OnInit {

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective,  OPTIONS_TYPE, CHART_TYPE } from 'igniteui-angular-extras';
 
 import { FinancialData } from '../data/financialData';
@@ -11,7 +11,6 @@ import { DecimalPipe, CurrencyPipe } from '@angular/common';
     selector: 'app-grid-dynamic-chart-data',
     templateUrl: './grid-dynamic-chart-data.component.html',
     styleUrls: ['./grid-dynamic-chart-data.component.scss'],
-    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
 })
 export class GridDynamicChartDataComponent implements OnInit, AfterViewInit {

projects/app-lob/src/app/grid-finjs-dock-manager/dock-slot.component.ts

@@ -1,13 +1,14 @@
 // eslint-disable-next-line max-len
-import { AfterViewInit, Component, Directive, EventEmitter, HostBinding, Input, OnInit, OnDestroy, Output, ViewChild, ViewContainerRef, inject, ChangeDetectionStrategy } from '@angular/core';
+import { AfterViewInit, Component, Directive, EventEmitter, HostBinding, Input, OnInit, OnDestroy, Output, ViewChild, ViewContainerRef, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Directive({
     // eslint-disable-next-line @angular-eslint/directive-selector
     selector: '[gridHost]'
 })
-export class GridHostDirective {    viewContainerRef = inject(ViewContainerRef);
-
+export class GridHostDirective {
+    viewContainerRef = inject(ViewContainerRef);
+
 }
 
 @Component({
@@ -16,7 +17,6 @@ export class GridHostDirective {    viewContainerRef = inject(ViewContainerRef)
     <div style='width: 100%; height: 100%; overflow-x: hidden;'>
         <ng-template gridHost></ng-template>
     </div>`,
-    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [GridHostDirective]
 })
 export class DockSlotComponent implements OnInit, AfterViewInit, OnDestroy {

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Renderer2, OnDestroy, OnInit, DoCheck, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, CUSTOM_ELEMENTS_SCHEMA, inject, ChangeDetectionStrategy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Renderer2, OnDestroy, OnInit, DoCheck, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
 import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, DefaultSortingStrategy, GridColumnDataType, IgxOverlayOutletDirective, OverlaySettings, SortingDirection } from 'igniteui-angular/core';
 import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
@@ -24,7 +24,6 @@ import { AsyncPipe, CurrencyPipe } from '@angular/common';
     templateUrl: './grid-finjs-dock-manager.component.html',
     styleUrls: ['./grid-finjs-dock-manager.component.scss'],
     imports: [IgxSwitchComponent, FormsModule, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxButtonDirective, IgxOverlayOutletDirective, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, GridHostDirective, AsyncPipe, CurrencyPipe],
-    changeDetection: ChangeDetectionStrategy.Eager,
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterViewInit, DoCheck {

projects/app-lob/src/app/grid-finjs/controllers.component.ts

@@ -1,25 +1,24 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { IButtonGroupEventArgs, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
-import { IChangeCheckboxEventArgs } from 'igniteui-angular/checkbox';
-import { ISliderValueChangeEventArgs, IgxSliderComponent } from 'igniteui-angular/slider';
-import { IgxToastComponent } from 'igniteui-angular/toast';
-import { VerticalAlignment } from 'igniteui-angular/core';
+import { IButtonGroupEventArgs, IgxButtonGroupComponent } from 'igniteui-angular/button-group';
+import { IChangeCheckboxEventArgs } from 'igniteui-angular/checkbox';
+import { ISliderValueChangeEventArgs, IgxSliderComponent } from 'igniteui-angular/slider';
+import { IgxToastComponent } from 'igniteui-angular/toast';
+import { VerticalAlignment } from 'igniteui-angular/core';
 import { IgxSwitchComponent } from 'igniteui-angular/switch';
 import { Observable, Subscription, timer } from 'rxjs';
-import { debounce } from 'rxjs/operators';
-
+import { debounce } from 'rxjs/operators';
+
 import { FormsModule } from '@angular/forms';
 
-@Component({
-    selector: 'app-finjs-controllers',
-    styleUrls: ['./controllers.component.scss'],
-    templateUrl: './controllers.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IgxSwitchComponent, FormsModule, IgxSliderComponent, IgxButtonGroupComponent, IgxToastComponent]
+@Component({
+    selector: 'app-finjs-controllers',
+    styleUrls: ['./controllers.component.scss'],
+    templateUrl: './controllers.component.html',
+    imports: [IgxSwitchComponent, FormsModule, IgxSliderComponent, IgxButtonGroupComponent, IgxToastComponent]
 })
-export class ControllerComponent implements OnInit, OnDestroy {
-    private router = inject(ActivatedRoute);
+export class ControllerComponent implements OnInit, OnDestroy {
+    private router = inject(ActivatedRoute);
 
     @ViewChild('buttonGroup1', { static: true }) public playButtons: IgxButtonGroupComponent;
     @ViewChild('slider1', { static: true }) public volumeSlider: IgxSliderComponent;
@@ -69,7 +68,7 @@ export class ControllerComponent implements OnInit, OnDestroy {
         this.frequencyChanged$ = this.intervalSlider.valueChange.pipe(debounce(() => timer(200)));
         this.frequencyChangedSubscription = this.frequencyChanged$
             .subscribe(() => this.frequencyChanged.emit(this.intervalSlider.value as number));
-        
+
         this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle;
 
         // Hide theme switcher

projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
 import { CellType, GridSelectionMode, IColumnExportingEventArgs, IGridKeydownEventArgs, IRowSelectionEventArgs, IgxCellEditorTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxExcelTextDirective, IgxExporterEvent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxPdfExporterOptions, IgxPdfExporterService, IgxPdfTextDirective } from 'igniteui-angular/grids/core';
 import { DefaultSortingStrategy, IgxOverlayOutletDirective, OverlaySettings, SortingDirection } from 'igniteui-angular/core';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
@@ -17,15 +17,14 @@ import { FormsModule } from '@angular/forms';
     selector: 'app-finjs-grid',
     templateUrl: './grid-finjs.component.html',
     styleUrls: ['./grid-finjs.component.scss'],
-    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxPdfTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
 })
 export class GridFinJSComponent implements OnInit {
-    private el = inject(ElementRef);
-    private document = inject<Document>(DOCUMENT);
-    private pdfExportService = inject(IgxPdfExporterService);
-    private cdr = inject(ChangeDetectorRef);
-    dataService = inject(SignalRService);
+    private el = inject(ElementRef);
+    private document = inject<Document>(DOCUMENT);
+    private pdfExportService = inject(IgxPdfExporterService);
+    private cdr = inject(ChangeDetectorRef);
+    dataService = inject(SignalRService);
 
     @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
     @ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet: IgxOverlayOutletDirective;
@@ -54,12 +53,12 @@ export class GridFinJSComponent implements OnInit {
         this.overlaySettings.outlet = this.outlet;
         this.data$ = this.dataService.data;
 
-        this.data$.subscribe((data) => {
-            if (data.length !== 0) {
-                this.isLoading = false;
-                this.cdr.markForCheck();
-            };
-        });
+        this.data$.subscribe((data) => {
+            if (data.length !== 0) {
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            };
+        });
 
         // Set initially grouped columns
         this.toggleGrouping();