Add support for Angular 22

[codetroll]

This is the an issue to track the compability with Angular 22.

[awaismalik47]

With the latest version of ngx-bootstrap requiring applications to migrate to zoneless, will older applications be unable to use any newer versions of ngx-bootstrap until they have migrated? Is there any way for an application to still use Zone.js with ngx-bootstrap, at least until it has migrated

[Nvanveen-magnius]

For one, ngx-bootstrap is broken because it injects ComponentFactoryResolver, which has been removed in v22.

ComponentFactoryResolver and ComponentFactory are no longer available. Pass the component class directly to APIs like ViewContainerRef.createComponent() or use the standalone createComponent()

[codetroll]

For one, ngx-bootstrap is broken because it injects ComponentFactoryResolver, which has been removed in v22.

ComponentFactoryResolver and ComponentFactory are no longer available. Pass the component class directly to APIs like ViewContainerRef.createComponent() or use the standalone createComponent()

Seems a PR are already in place for this here - it "just" needs a review.

[codetroll]

Do we have an ETA for an Angular 22 compatible release?

[lexasq]

We don't usually make -next versions, But if there's an interest - I can make it happen.

[vvolodin]

Please do, we're currently fixing it via 'patch-package' and we'd love to get rid of that.

[sherlock1982]

Yes but why -next ? Make it 22.0.0. You can always release patches later - mostly it should work or?

[codetroll]

We don't usually make -next versions, But if there's an interest - I can make it happen.

The need for -next versions kinda depends on the ETA for the next version that do support Angular 22.

[Nvanveen-magnius]

Why not make it 22.0.1? It's a bugfix, it can be a minor release.

[t0m-4]

I’d be interested in a -next version as well, please.

[storm-break-R]

For one, ngx-bootstrap is broken because it injects ComponentFactoryResolver, which has been removed in v22.

ComponentFactoryResolver and ComponentFactory are no longer available. Pass the component class directly to APIs like ViewContainerRef.createComponent() or use the standalone createComponent()

Seems a PR are already in place for this here - it "just" needs a review.

Looks like PR got merged last week, any update when can we expect a release?

[lexasq]

PR with fixes was released last week, I just didn't promote it to the latest. I'll start v22 upgrade this week, if testing will go smooth we could get this upgrade this week also.

[lexasq]

ngx-bootstrap@21.2.1-test.20260626123219.5 is published for you guys to try it ouw with angular22. NX didn't release stable version to support angular22, only beta, I wouldn't like to release with beta dependencies, so main one will have to wait for NX.

[piotrbaczek]

Uninstallable because of peer dependencies

"peerDependencies": {
    "@angular/common": "^21.2.0",
    "@angular/core": "^21.2.0",
    "@angular/forms": "^21.2.0",
    "rxjs": "^6.5.3 || ^7.4.0"
}

pbaczek@N-WAH:~/learning/frontend$ npm install ngx-bootstrap@21.2.1-test.20260626123219.5
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: frontend@0.0.0
npm error Found: @angular/common@22.0.6
npm error node_modules/@angular/common
npm error   @angular/common@"^22.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer @angular/common@"^21.2.0" from ngx-bootstrap@21.2.1-test.20260626123219.5
npm error node_modules/ngx-bootstrap
npm error   ngx-bootstrap@"21.2.1-test.20260626123219.5" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /home/pbaczek/.npm/_logs/2026-07-10T12_06_26_959Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/pbaczek/.npm/_logs/2026-07-10T12_06_26_959Z-debug-0.log

[ShaneYu]

@awaismalik47

With the latest version of ngx-bootstrap requiring applications to migrate to zoneless, will older applications be unable to use any newer versions of ngx-bootstrap until they have migrated? Is there any way for an application to still use Zone.js with ngx-bootstrap, at least until it has migrated

Actually you do NOT need to migrate your app to zoneless to use the latest version of ngx-bootstrap. You can safely keep zone.js in your application.

The release notes stating "Applications must use provideZonelessChangeDetection()" are honestly a bit misleading for consumers of the library. What that actually means is:

1. ngx-bootstrap internally no longer relies on zone.js to manage its components.
2. zone.js was removed as a peer dependency so that fully zoneless apps aren't forced to install it.
3. This is the baseline environment the library maintainers officially test against.

However, Angular components built with signals and zoneless architecture are 100% backwards-compatible with zone.js applications. If your app uses zone.js, the library components will work without any issues - zone.js will just continue running in the background for your application code as usual.

What you actually need to do to upgrade:

You can leave your app's bootstrap providers and zone.js setup completely untouched. You only need to adjust to the library's API breaking changes:

• Remove .forRoot() calls: Import modules directly (e.g., BsDropdownModule instead of BsDropdownModule.forRoot()).
• Signal Input syntax (if accessing components programmatically): If you access a component instance via @ViewChild in TypeScript, inputs are now signal getters.

  // Old way
  this.myComponent.bsValue = new Date();
  
  // New way (reading the signal)
  const val = this.myComponent.bsValue();

(Note: Standard HTML template bindings like [bsValue]="myDate" still work the exact same way).

---

TL;DR: You can upgrade ngx-bootstrap right now without touching your app's change detection strategy, and migrate your application to zoneless later whenever your team is ready.