feat(angular)!: migrate Angular-Slickgrid to Standalone Component

[ghiscoding]

migrate Angular-Slickgrid to Standalone Component (dropping AngularSlickgridModule)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.0%. Comparing base (2a35e48) to head (0eda622).
⚠️ Report is 1 commits behind head on next.

Additional details and impacted files

@@           Coverage Diff           @@
##             next    #2339   +/-   ##
=======================================
  Coverage   100.0%   100.0%           
=======================================
  Files         196      195    -1     
  Lines       23953    23949    -4     
  Branches     8415     8414    -1     
=======================================
- Hits        23953    23949    -4     

Flag	Coverage Δ
angular	100.0% <100.0%> (ø)
universal	100.0% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pkg-pr-new]

angular-slickgrid

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/angular-slickgrid@2339

aurelia-slickgrid

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/aurelia-slickgrid@2339

slickgrid-react

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/slickgrid-react@2339

slickgrid-vue

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/slickgrid-vue@2339

@slickgrid-universal/angular-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/angular-row-detail-plugin@2339

@slickgrid-universal/aurelia-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/aurelia-row-detail-plugin@2339

@slickgrid-universal/react-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/react-row-detail-plugin@2339

@slickgrid-universal/vue-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vue-row-detail-plugin@2339

@slickgrid-universal/binding

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/binding@2339

@slickgrid-universal/common

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/common@2339

@slickgrid-universal/composite-editor-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/composite-editor-component@2339

@slickgrid-universal/custom-footer-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/custom-footer-component@2339

@slickgrid-universal/custom-tooltip-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/custom-tooltip-plugin@2339

@slickgrid-universal/empty-warning-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/empty-warning-component@2339

@slickgrid-universal/event-pub-sub

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/event-pub-sub@2339

@slickgrid-universal/excel-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/excel-export@2339

@slickgrid-universal/graphql

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/graphql@2339

@slickgrid-universal/odata

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/odata@2339

@slickgrid-universal/pagination-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/pagination-component@2339

@slickgrid-universal/pdf-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/pdf-export@2339

@slickgrid-universal/row-detail-view-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/row-detail-view-plugin@2339

@slickgrid-universal/rxjs-observable

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/rxjs-observable@2339

@slickgrid-universal/text-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/text-export@2339

@slickgrid-universal/utils

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/utils@2339

@slickgrid-universal/vanilla-bundle

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vanilla-bundle@2339

@slickgrid-universal/vanilla-force-bundle

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vanilla-force-bundle@2339

commit: 0eda622

[ghiscoding]

@zewa666 @jr01 I would really like to get some real Angular user feedback like you guys. I haven't programmed much in Angular for the past 2 years, but I'm assuming that is the direction that we should go, is that correct? I'd really like to know if this is good to go with and/or if there could be negative side effect? This is obviously a major breaking change and is tagged to go in my upcoming Angular-Slickgrid v10 (I think I can release a Beta by next week and these changes are all mentioned in the migration guide).

If you guys could do a quick review and provide feedback, that would be super helpful because like I said, I haven't used Angular in a while and I want to make sure this is something we should proceed with... or cancel, depending on your feedback. At least my Cypress tests are all passing, so I'm assuming that it's a good sign...

If you have time for a review, I would like to emphasizes reviewing changes in these particular files

• main.ts
• angular-slickgrid.module.ts - dropping AngularSlickgridModule was a bit tricky, because that module was also preloading some DI like global slickgrid config via .forRoot() and other things like AngularUtilService and ContainerService used by Slickgrid-Universal... but I think it's ok without them. User can still load global config via a DI use in main.ts
• angular-slickgrid.component.ts - I mainly changed the global config DI to @Optional() @Inject('defaultGridOption') protected forRootConfig?: GridOption, which I think is ok

again I would really appreciate feedback and a review if possible before I merge this, because it is quite a major change and important to the end users like you guys, so...

[zewa666]

I'll check that out and let ya know begin next week

[jr01]

yes, I'll have a look and also asked a collegae to give feedback - expect early next week

[zewa666]

only a few minor things. Aside from that everything looks good for me

[zewa666]

perhaps while at it, we could offer a customClass binding to the slickgridContainer-xyz div, so that its easier to attach custom css classes to the inside of the component

[ghiscoding]

@zewa666 can you provide the changes that are required for this or create a PR on the next branch for this?

[zewa666]

I'll create a PR after this gets merged

[jr01]

Hi @ghiscoding,

Sorry for responding a bit later than promised, too much on the plate. 😅

I didn't look myself into this - I just fully delegated this task to Claude Opus 4.5 using our codebase and your PR (files & comments). Sorry about that as well 😉

Here is what it wrote:

---

I've reviewed this PR against our production Angular 21 application that uses Angular-Slickgrid. Here's my assessment:

✅ The migration looks good and is the right direction.

We're using Angular 21 with zoneless change detection (provideZonelessChangeDetection()), standalone components throughout, and OnPush change detection - all modern Angular patterns. This PR aligns well with where Angular is heading.

Our Usage Pattern:

• We use AngularSlickgridModule.forRoot() without global options in our app configuration
• We import AngularSlickgridModule in component imports (standalone components)
• We extensively use features like: AngularGridInstance, AngularUtilService, SlickRowDetailView, GridOption, column definitions, etc.

Migration Impact for us:

1. Replace AngularSlickgridModule.forRoot() → AngularSlickgridComponent in app providers
2. Replace AngularSlickgridModule → AngularSlickgridComponent in component imports
3. Update test files similarly

Technical Observations:

1. The @Optional() @Inject('defaultGridOption') pattern is clean and works well for optional library configuration
2. The ContainerService being providedIn: 'root' is good for tree-shaking
3. The component API (inputs/outputs) remains stable, which is great for migration

Re: Signal-based Inputs discussion:
We agree with waiting on signal inputs for v11. Our codebase is already signals-first, but for a library, maintaining @Input/@Output compatibility is pragmatic. Users who want signals can use: [dataset]="dataset()"

Verdict: 👍 Approve - this is a solid modernization. The breaking change is justified and the migration path is clear.

[ghiscoding]

@jr01 ok great thanks for the feedback nonetheless, it's still quite informative since it's compared with your actual code. Just a side note though, for the comment below,

We're using Angular 21 with zoneless change detection (provideZonelessChangeDetection()), standalone components throughout, and OnPush change detection - all modern Angular patterns. This PR aligns well with where Angular is heading.

I'm also actually going Zoneless as well but that was done in a separate PR #2341 since it's a different topic, so just in case you missed that other PR, it will be Standalone and Zoneless 😉

Re: Signal-based Inputs discussion:
We agree with waiting on signal inputs for v11. Our codebase is already signals-first, but for a library, maintaining @Input/@Output compatibility is pragmatic. Users who want signals can use: [dataset]="dataset()"

Great I think we all agreed on the same end goal, it's great to modernize but doing in step is also a good idea and I will add a comment in the migration guide for possible "future changes".

Thanks for all the feedback, well worth it and that should benefit everyone 😄

[github-actions]

🎉 This pull request is included in version 10.0.0-beta.0 📦
🔗 The release notes are available at: GitHub Release 🚀