feat(angular): adjust change detection as per angular 22

projects/ngx-datatable/src/lib/components/body/body-cell.component.ts

@@ -1,7 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import {
   booleanAttribute,
-  ChangeDetectionStrategy,
   Component,
   computed,
   DoCheck,
@@ -84,7 +83,6 @@ import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ENTER } from '../../util
     </div>
   `,
   styleUrl: './body-cell.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-body-cell',
     '[class]': 'columnCssClasses()',

projects/ngx-datatable/src/lib/components/body/body-group-wrapper.component.ts

@@ -1,12 +1,5 @@
 import { NgTemplateOutlet } from '@angular/common';
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output
-} from '@angular/core';
+import { booleanAttribute, Component, computed, input, output } from '@angular/core';
 
 import { Group, GroupContext, Row } from '../../types/public.types';
 import { DatatableGroupHeaderDirective } from './body-group-header.directive';
@@ -45,7 +38,6 @@ import { DatatableGroupHeaderDirective } from './body-group-header.directive';
     }
   `,
   styleUrl: './body-group-wrapper.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-group-wrapper'
   }

projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts

@@ -11,6 +11,7 @@ import {
   TemplateRef,
   ViewContainerRef,
   input,
+  ChangeDetectionStrategy,
   booleanAttribute
 } from '@angular/core';
 
@@ -30,7 +31,7 @@ import { RowOrGroup } from '../../types/public.types';
       [ngTemplateOutletContext]="rowContext"
     />
   }`,
-  styleUrl: './body-row-def.component.scss'
+  changeDetection: ChangeDetectionStrategy.Eager
 })
 export class DatatableRowDefComponent {
   private host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;

projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts

@@ -1,7 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import {
   booleanAttribute,
-  ChangeDetectionStrategy,
   Component,
   computed,
   DoCheck,
@@ -30,7 +29,6 @@ import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive'
     }
   `,
   styleUrl: './body-row-wrapper.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-row-wrapper'
   }

projects/ngx-datatable/src/lib/components/body/body-row.component.ts

@@ -1,6 +1,5 @@
 import {
   booleanAttribute,
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   computed,
@@ -59,7 +58,6 @@ import { DataTableBodyCellComponent } from './body-cell.component';
     }
   `,
   styleUrl: './body-row.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-body-row',
     role: 'row',

projects/ngx-datatable/src/lib/components/body/body.component.ts

@@ -1,7 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import {
   booleanAttribute,
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   computed,
@@ -248,7 +247,6 @@ import { DataTableSummaryRowComponent } from './summary/summary-row.component';
     }
   `,
   styleUrl: './body.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-body'
   }

projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.ts

@@ -1,20 +1,13 @@
 import { NgTemplateOutlet } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  numberAttribute,
-  input
-} from '@angular/core';
+import { Component, computed, numberAttribute, input } from '@angular/core';
 
 import { TableColumnInternal } from '../../../types/internal.types';
 
 @Component({
   selector: 'ghost-loader',
   imports: [NgTemplateOutlet],
   templateUrl: './ghost-loader.component.html',
-  styleUrl: './ghost-loader.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  styleUrl: './ghost-loader.component.scss'
 })
 export class DataTableGhostLoaderComponent {
   readonly columns = input.required<TableColumnInternal[]>();

projects/ngx-datatable/src/lib/components/body/progress-bar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'datatable-progress',
@@ -8,7 +8,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
         <div class="bar"></div>
       </div>
     </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  `
 })
 export class ProgressBarComponent {}

projects/ngx-datatable/src/lib/components/body/scroller.component.ts

@@ -1,5 +1,4 @@
 import {
-  ChangeDetectionStrategy,
   Component,
   inject,
   OnDestroy,
@@ -21,7 +20,6 @@ export interface ScrollEventInternal {
 @Component({
   selector: 'datatable-scroller',
   template: ` <ng-content /> `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-scroll',
     '[style.height.px]': 'scrollHeight()'

projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.ts

@@ -1,5 +1,5 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { Component, computed, input, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, TemplateRef } from '@angular/core';
 
 import { TableColumnInternal } from '../../../types/internal.types';
 import { DataTableBodyRowComponent } from '../body-row.component';
@@ -48,6 +48,7 @@ const noopSumFunc = (cells: any[]): void => {
     }
   `,
   styleUrl: './summary-row.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
   host: {
     class: 'datatable-summary-row'
   }

projects/ngx-datatable/src/lib/components/datatable.component.ts

@@ -2,7 +2,6 @@ import {
   AfterViewInit,
   afterNextRender,
   booleanAttribute,
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   computed,
@@ -97,7 +96,6 @@ import { DatatableRowDetailDirective } from './row-detail/row-detail.directive';
       useExisting: DatatableComponent
     }
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'ngx-datatable',
     '[class.fixed-header]': '_isFixedHeader()',

projects/ngx-datatable/src/lib/components/footer/footer.component.ts

@@ -1,5 +1,5 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, input, output, Signal } from '@angular/core';
+import { Component, computed, input, output, Signal } from '@angular/core';
 
 import { FooterContext, PagerPageEvent } from '../../types/public.types';
 import { DatatableFooterDirective } from './footer.directive';
@@ -34,7 +34,6 @@ import { DatatablePagerComponent } from './pager.component';
     </div>
   `,
   styleUrl: './footer.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-footer'
   }

projects/ngx-datatable/src/lib/components/footer/pager.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 
 import { Page } from '../../types/internal.types';
 import { DATATABLE_COMPONENT_TOKEN } from '../../utils/table-token';
@@ -87,7 +87,6 @@ import { DatatableComponent } from '../datatable.component';
     </ul>
   `,
   styleUrl: './pager.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-pager'
   }

projects/ngx-datatable/src/lib/components/header/header-cell.component.ts

@@ -1,6 +1,5 @@
 import { NgTemplateOutlet } from '@angular/common';
 import {
-  ChangeDetectionStrategy,
   Component,
   ElementRef,
   HostListener,
@@ -81,7 +80,6 @@ import { nextSortDir } from '../../utils/sort';
     }
   `,
   styleUrl: './header-cell.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-header-cell',
     '[attr.resizeable]': 'showResizeHandle()',

projects/ngx-datatable/src/lib/components/header/header.component.ts

@@ -1,11 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-  TemplateRef
-} from '@angular/core';
+import { Component, computed, input, output, TemplateRef } from '@angular/core';
 
 import { DatatableDraggableDirective } from '../../directives/datatable-draggable.directive';
 import { OrderableDirective } from '../../directives/orderable.directive';
@@ -80,7 +73,6 @@ import { DataTableHeaderCellComponent } from './header-cell.component';
     </div>
   `,
   styleUrl: './header.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-header',
     '[style.height.px]': 'headerHeight()'

projects/stackblitz/src/main.ts

@@ -1,4 +1,4 @@
-import { Component, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DataTableColumnDirective, DatatableComponent } from '@siemens/ngx-datatable';
 
@@ -20,7 +20,8 @@ import { DataTableColumnDirective, DatatableComponent } from '@siemens/ngx-datat
       <ngx-datatable-column name="field1" />
       <ngx-datatable-column name="field2" />
     </ngx-datatable>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.Eager
 })
 export class App {
   mockData = new Array(100).fill(0).map((_, i) => ({

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { HashLocationStrategy, Location, LocationStrategy } from '@angular/common';
-import { Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
 
 import packageInfo from '../../projects/ngx-datatable/package.json';
@@ -14,7 +14,8 @@ import packageInfo from '../../projects/ngx-datatable/package.json';
       provide: LocationStrategy,
       useClass: HashLocationStrategy
     }
-  ]
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager
 })
 export class AppComponent {
   version = packageInfo.version;

src/app/basic/10k-rows.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal, viewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal, viewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
   DataTableColumnCellDirective,
@@ -74,7 +74,8 @@ import { DataService } from '../data.service';
         <ngx-datatable-column name="Row Height" prop="height" [width]="80" />
       </ngx-datatable>
     </div>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.Eager
 })
 export class TenKRowsComponent {
   private dataService = inject(DataService);

src/app/basic/bootstrap-theme.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { DatatableComponent, TableColumn } from '@siemens/ngx-datatable';
 
 import { Employee } from '../data.model';
@@ -37,7 +37,8 @@ import { DataService } from '../data.service';
         [reorderable]="reorderable"
       />
     </div>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.Eager
 })
 export class BootstrapThemeComponent {
   private dataService = inject(DataService);

src/app/basic/context-menu.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ContextMenuEvent, DatatableComponent, TableColumn } from '@siemens/ngx-datatable';
 
 import { Employee } from '../data.model';
@@ -54,7 +54,8 @@ import { DataService } from '../data.service';
         (tableContextmenu)="onTableContextMenu($event)"
       />
     </div>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.Eager
 })
 export class ContextMenuComponent {
   protected readonly rows = inject(DataService).load('company.json');

src/app/basic/css-classes.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { DataTableColumnDirective, DatatableComponent, TableColumn } from '@siemens/ngx-datatable';
 import { map } from 'rxjs';
 
@@ -36,7 +36,8 @@ import { DataService } from '../data.service';
         <ngx-datatable-column name="Age" />
       </ngx-datatable>
     </div>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.Eager
 })
 export class CssClassesComponent {
   protected readonly rows = inject(DataService)

src/app/basic/dark-theme.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { DatatableComponent, TableColumn } from '@siemens/ngx-datatable';
 
 import { Employee } from '../data.model';
@@ -36,7 +36,8 @@ import { DataService } from '../data.service';
         [reorderable]="reorderable"
       />
     </div>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.Eager
 })
 export class DarkThemeComponent {
   private dataService = inject(DataService);

src/app/basic/disabled.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import {
   DataTableColumnCellDirective,
   DataTableColumnDirective,
@@ -90,7 +90,8 @@ import { DataService } from '../data.service';
         </ngx-datatable>
       </div>
     </div>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.Eager
 })
 export class DisabledComponent {
   private dataService = inject(DataService);

src/app/basic/dynamic-row-height.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { DataTableColumnDirective, DatatableComponent } from '@siemens/ngx-datatable';
 import { map } from 'rxjs';
 
@@ -36,7 +36,8 @@ import { DataService } from '../data.service';
         <ngx-datatable-column name="Row Height" prop="height" />
       </ngx-datatable>
     </div>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.Eager
 })
 export class DynamicRowHeightComponent {
   protected readonly rows = inject(DataService)