ngx-spinner 22.0.0

🚀 Angular 22 Support

on Node.js NPM

What's Changed

🚀 Angular 22 Support

• Upgraded the entire workspace — library, schematics, and demo app — to Angular 22, including @angular/core, cdk, material, cli, build-angular, ng-packagr, and all supporting tooling.
• Bumped TypeScript, ESLint (flat config, v10), Jasmine/Karma, and other dev dependencies to their Angular 22–compatible versions.
• Migrated ESLint config from .eslintrc.json to flat eslint.config.js (required by ESLint 9+/angular-eslint 22).
• Fixed several strict-mode TypeScript compile errors surfaced by the newer toolchain.

🐛 Fixed: spinner rendering behind MatDialog / CDK overlays

• Root cause: Angular CDK v21+ overlays (including MatDialog) render in the browser's native top layer by default, which ignores normal z-index stacking — so the spinner's old position: fixed overlay could never appear above a dialog.
• Fix: fullscreen spinners now also render via the native Popover API, so they participate in the same top layer and stack correctly above other overlays.
• New [usePopover] @Input() (default true) to opt out per-instance, plus a matching usePopover option on NgxSpinnerConfig for a global default. Falls back automatically in browsers without Popover API support. No effect when fullScreen is false.

🐛 Fixed: ng add ngx-spinner was broken

• Fatal crash on install: the published package.json declares "type": "module", but the schematics were compiled as CommonJS with no override, causing exports is not defined in ES module scope. Fixed by scoping the schematics folder back to CommonJS.
• Complete failure on standalone apps (the Angular default since v17): the schematic now detects standalone apps and inserts NgxSpinnerModule into the bootstrapped root component's imports array instead of looking for an AppModule.
• Crash when --project wasn't passed: added the missing schema.json so the Angular CLI can auto-resolve the current project.
• Removed a redundant second npm install step that added unnecessary wait time and a potential failure point in offline/restricted-network CI.

✨ New: optional HTTP interceptor

• ngxSpinnerInterceptor (functional) and NgxSpinnerInterceptor (class-based) automatically show/hide the spinner around HTTP requests — no more manually calling NgxSpinnerService from every component.
• Tracks concurrent in-flight requests per spinner name, so the spinner only hides once every request has finished.
• NGX_SPINNER_SKIP context token to opt individual requests out, and provideNgxSpinnerHttpConfig() to set the target spinner name, extra options, and excluded URLs.
• Entirely opt-in — existing NgxSpinnerService/<ngx-spinner> usage is unaffected unless you register it.

🎨 Redesigned demo/playground site

• Ground-up visual redesign of the live demo: searchable animation gallery, a live preview stage driving the real <ngx-spinner> component, a full configuration panel, a generated-code panel (HTML/TS) with one-click copy, and a dark/light theme toggle.
• Dropped Angular Material and ngx-color-picker from the demo app in favor of custom-styled native controls — cut the demo bundle from ~651KB to ~200KB.
• Restored an auto-hide-after-3-seconds safety net for the fullscreen preview, since a Popover-backed fullscreen spinner blocks clicks to everything underneath it, including its own dismiss button.
• Removed the outdated StackBlitz demo links.

📦 Dependency/config cleanup

• Removed the library's own accidental self-dependency on ngx-spinner from the root package.json.
• Moved @angular/cdk to devDependencies (only needed by the schematics build).

📝 Documentation

• README overhauled: new "What's New", updated "Features", new "HTTP Interceptor" section, expanded "Demo" section, refreshed Angular version support table, and removed the stale "Future Plan" section.

Full Changelog: v21.0.0...v22