refactor(*): migrate to zoneless change detection

angular.json

@@ -18,7 +18,6 @@
             "index": "src/index.html",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": [
-              "zone.js",
               "hammerjs"
             ],
             "assets": [
@@ -220,7 +219,7 @@
           "builder": "@angular/build:karma",
           "options": {
             "main": "projects/app-lob/src/test.ts",
-            "polyfills": "projects/app-lob/src/polyfills.ts",
+            "polyfills": ["projects/app-lob/src/polyfills.ts"],
             "tsConfig": "projects/app-lob/tsconfig.spec.json",
             "karmaConfig": "projects/app-lob/karma.conf.js",
             "assets": [

live-editing/configs/PivotGridConfigGenerator.ts

@@ -82,6 +82,12 @@ export class PivotGridConfigGenerator implements IConfigGenerator {
             component: 'PivotGridLayoutComponent'
         }));
 
+        configs.push(new Config({
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/dataToAnalyze.ts'],
+            appConfig: BaseAppConfig,
+            component: 'PivotStylingComponent'
+        }));
+
         return configs;
     }
 }

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-crm/src/main.server.ts

@@ -1,8 +1,7 @@
-import { provideZoneChangeDetection } from "@angular/core";
 import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
-const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZoneChangeDetection(), ...config.providers]}, context);
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, config, context);
 
 export default bootstrap;

projects/app-crm/src/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { enableProdMode } from '@angular/core';
 import { environment } from './environments/environment';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
@@ -8,4 +8,4 @@ if (environment.production) {
   enableProdMode();
 }
 
-bootstrapApplication(AppComponent, {...AppConfig, providers: [provideZoneChangeDetection(), ...AppConfig.providers]}).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, AppConfig).catch((err) => console.error(err));

projects/app-crm/src/polyfills.ts

@@ -2,4 +2,3 @@
 //  * Zone JS is required by Angular itself.
 // //  */
 import 'hammerjs/hammer';
-import 'zone.js';  // Included with Angular CLI.

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 {
@@ -174,6 +173,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
         this.data.pipe(takeUntil(this.destroy$)).subscribe((data) => {
             if (data.length !== 0) {
                 this.isLoading = false;
+                this.cdr.markForCheck();
             };
         });
     }
@@ -225,6 +225,7 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
                 ignoreCase: false,
                 strategy: DefaultSortingStrategy.instance()
             }];
+            this.cdr.markForCheck();
         }, 500);
     }
 
@@ -303,7 +304,10 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
         const componentRef = viewContainerRef.createComponent(IgxGridComponent);
         const grid = (componentRef.instance as IgxGridComponent);
         grid.autoGenerate = true;
-        this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => grid.data = d);
+        this.dataService.data.pipe(takeUntil(destructor)).subscribe(d => {
+            grid.data = d;
+            componentRef.changeDetectorRef.markForCheck();
+        });
         grid.columnInit.pipe(takeUntil(destructor)).subscribe((col: IgxColumnComponent) => {
             if (col.field === 'price') {
                 col.cellClasses = this.trends;

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 { 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,13 +17,13 @@ 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);
 
     @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
@@ -56,6 +56,7 @@ export class GridFinJSComponent implements OnInit {
         this.data$.subscribe((data) => {
             if (data.length !== 0) {
                 this.isLoading = false;
+                this.cdr.markForCheck();
             };
         });
 

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, HostBinding, OnDestroy, ViewChild, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective } from 'igniteui-angular/dialog';
 import { IgxOverlayOutletDirective, OverlaySettings } from 'igniteui-angular/core';
@@ -12,10 +12,11 @@ import { GridFinJSComponent } from './grid-finjs.component';
     selector: 'app-finjs-main',
     styleUrls: ['./main.component.scss'],
     templateUrl: './main.component.html',
-    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
 })
 export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
+    private cdr = inject(ChangeDetectorRef);
+
     @ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent;
     @ViewChild('controllers', { static: true }) public controller: ControllerComponent;
     @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
@@ -175,6 +176,7 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
                 this.chartData[0].region + ' Region';
 
             this.dialog.open();
+            this.cdr.markForCheck();
         }, 200);
     }