feat(angular): adjust change detection as per angular 22 - #755
feat(angular): adjust change detection as per angular 22#755mistrykaran91 wants to merge 1 commit into
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates Angular and related dependencies to version 22.0.7, removes ChangeDetectionStrategy.OnPush from several core library components, and introduces ChangeDetectionStrategy.Eager across various components. The review feedback highlights critical issues with these changes: first, ChangeDetectionStrategy.Eager is not a valid Angular strategy and should be removed; second, removing OnPush change detection from high-frequency rendering components like body cells and rows will cause severe performance regressions during table rendering and scrolling.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| /> | ||
| }` | ||
| }`, | ||
| changeDetection: ChangeDetectionStrategy.Eager |
There was a problem hiding this comment.
There is no ChangeDetectionStrategy.Eager in Angular. The only available strategies are Default and OnPush. Since Default is the default strategy when changeDetection is omitted, you can simply remove this property.
| ], | ||
| changeDetection: ChangeDetectionStrategy.Eager |
There was a problem hiding this comment.
There is no ChangeDetectionStrategy.Eager in Angular. If you want to use the default change detection strategy, you can simply omit the changeDetection property entirely.
]| </div> | ||
| `, | ||
| styleUrl: './body-cell.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, |
There was a problem hiding this comment.
Removing ChangeDetectionStrategy.OnPush from DataTableBodyCellComponent will cause a severe performance regression.
Since cells are rendered in large numbers and updated frequently (especially during scrolling, sorting, or filtering), using the default change detection strategy means Angular will re-evaluate every cell on every change detection cycle. Keeping OnPush is critical to ensure that only cells with changed inputs are updated, which is vital for maintaining 60fps scrolling performance.
| } | ||
| `, | ||
| styleUrl: './body-row.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, |
There was a problem hiding this comment.
Removing ChangeDetectionStrategy.OnPush from DataTableBodyRowComponent will significantly degrade table rendering and scrolling performance.
Rows are the primary container for cells, and change detection at the row level should only trigger when the row data or state actually changes. Reverting to the default change detection strategy will cause unnecessary checks across all rows and cells on every change detection cycle.
4cc036f to
8ec6e8e
Compare
There was a problem hiding this comment.
Pull request overview
Updates the Angular example app and the ngx-datatable library components to align with Angular 22 change detection behavior by removing explicit OnPush usage and explicitly opting into ChangeDetectionStrategy.Eager in components that previously had no changeDetection configured. Also bumps Angular patch versions and refreshes the lockfile accordingly.
Changes:
- Add
changeDetection: ChangeDetectionStrategy.Eageracross many example/demo components (and a couple library internals) and add necessary imports. - Remove explicit
ChangeDetectionStrategy.OnPushfrom severalprojects/ngx-datatablelibrary components. - Update Angular dependencies from
22.0.6→22.0.7(and@angular/cdk22.0.4→22.0.5) plus lockfile refresh; adjusttsconfig.app.jsonexcludes.
Reviewed changes
Copilot reviewed 75 out of 76 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.app.json | Removes src/test.ts from app TS exclude list (keeps excluding specs). |
| src/app/tree/full-screen-tree.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/tree/client-side-tree.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/templates/template-ref.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/templates/inline-template.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/summary/summary-row-actions.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/summary/simple-summary.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/summary/server-side-paging-summary.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/summary/inline-html-summary.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/summary/custom-template-summary.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/sorting/server-side-sorting.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/sorting/default-sort.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/sorting/comparator.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/sorting/client-side-sorting.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/selection/single-row-selection.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/selection/multi-row-selection.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/selection/multi-click-row-selection.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/selection/multi-click-and-checkbox-selection.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/selection/disable-selection-callback.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/selection/custom-checkbox-selection.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/selection/checkbox-selection.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/selection/cell-selection.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/paging/virtual-server-side.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/paging/server-side-paging.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/paging/scrolling-server-side.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/paging/scrolling-no-virtual.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/paging/client-side-paging.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/drag-drop/drag-drop.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/columns/force-column.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/columns/flex-column.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/columns/fixed-column.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/columns/column-toggling.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/columns/column-reorder.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/columns/column-pinning.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/vert-dynamic-scrolling.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/rxjs.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/row-grouping.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/row-detail.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/responsive.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/multiple-tables.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/live-data.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/inline-editing.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/horz-vert-scrolling.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/hidden-on-load.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/full-screen.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/footer-template.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/fluid-row-height.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/fixed-row-height.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/filtering.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/empty-template.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/dynamic-row-height.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/disabled.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/dark-theme.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/css-classes.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/context-menu.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/bootstrap-theme.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/basic/10k-rows.component.ts | Adds ChangeDetectionStrategy.Eager to demo component. |
| src/app/app.component.ts | Adds ChangeDetectionStrategy.Eager to root example app component. |
| projects/stackblitz/src/main.ts | Adds ChangeDetectionStrategy.Eager to StackBlitz demo app component. |
| projects/ngx-datatable/src/lib/components/header/header.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/header/header-cell.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/footer/pager.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/footer/footer.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/datatable.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.ts | Adds explicit ChangeDetectionStrategy.Eager to summary row component. |
| projects/ngx-datatable/src/lib/components/body/scroller.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/body/progress-bar.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/body/body.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/body/body-row.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts | Adds explicit ChangeDetectionStrategy.Eager to row-def component. |
| projects/ngx-datatable/src/lib/components/body/body-group-wrapper.component.ts | Removes explicit OnPush change detection configuration. |
| projects/ngx-datatable/src/lib/components/body/body-cell.component.ts | Removes explicit OnPush change detection configuration. |
| package.json | Bumps Angular (and related) dependency patch versions. |
| package-lock.json | Updates lockfile to match dependency version bumps. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
48e8a74 to
bdbaa36
Compare
- Remove explicit onPush - Add ChangeDetectionStrategy.Eager where changeDetection was not added
92809f7 to
b251711
Compare
| } | ||
| `, | ||
| styleUrl: './summary-row.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.Eager, |
There was a problem hiding this comment.
we just published it without Eager, without any issues. So you can just remove OnPush everywhere without adding Eager
What kind of change does this PR introduce? (check one with "x")
What is the current behavior? (You can also link to an open issue here)
What is the new behavior?
Does this PR introduce a breaking change? (check one with "x")
If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...
Other information: