Angular 20

README.md

@@ -13,13 +13,13 @@
 > No dependencies.
 > **Pure Angular!**
 
-> ✓ **Angular 19**, **Signals**, **Standalone Components** and Angular Universal (**SSR**) compatible
+> ✓ **Angular 20**, **Signals**, **Standalone Components** and Angular Universal (**SSR**) compatible
 
 Just hit the button to smoothly scroll back to the top of the page. [Here's the demo.](http://bartholomej.github.io/ngx-scrolltop/)
 
 - No dependencies! _(only smooth scroll-behavior polyfill for old iOS versions)_
 - Lightweight _(~2 kB gzipped)_
-- **Angular 19** compatible
+- **Angular 20** compatible
 - **Standalone Components** compatible
 - **Signals** compatible
 - Material Design inspired
@@ -54,7 +54,8 @@ npm install ngx-scrolltop --save # for lastest Angular only! See our compatibili
 
 | Angular version | ngx-scrolltop | Install                            |
 | --------------- | ------------- | ---------------------------------- |
-| ng19            | v19.x.x       | `npm install ngx-scrolltop@latest` |
+| ng20            | v20.x.x       | `npm install ngx-scrolltop@latest` |
+| ng19            | v19.x.x       | `npm install ngx-scrolltop@19`     |
 | ng18            | v18.x.x       | `npm install ngx-scrolltop@18`     |
 | ng17            | v17.x.x       | `npm install ngx-scrolltop@17`     |
 | ng16            | v6.x.x        | `ng add ngx-scrolltop@6`           |

angular.json

@@ -196,6 +196,30 @@
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   }
 }

package.json

@@ -31,54 +31,54 @@
     "release:major": "git checkout master && npm version major -m \"chore(update): major release %s 💥 \""
   },
   "dependencies": {
-    "@angular/animations": "^19.0.5",
-    "@angular/common": "^19.0.5",
-    "@angular/compiler": "^19.0.5",
-    "@angular/core": "^19.0.5",
-    "@angular/forms": "^19.0.5",
-    "@angular/platform-browser": "^19.0.5",
-    "@angular/platform-browser-dynamic": "^19.0.5",
-    "@angular/router": "^19.0.5",
-    "rxjs": "^7.4.0",
+    "@angular/animations": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "rxjs": "^7.8.2",
     "seamless-scroll-polyfill": "^2.3.4",
     "tslib": "^2.8.1",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.6",
-    "@angular-devkit/schematics": "^19.0.6",
-    "@angular-devkit/schematics-cli": "^19.0.6",
-    "@angular-eslint/builder": "19.0.2",
-    "@angular-eslint/eslint-plugin": "19.0.2",
-    "@angular-eslint/eslint-plugin-template": "19.0.2",
-    "@angular-eslint/schematics": "19.0.2",
-    "@angular-eslint/template-parser": "19.0.2",
-    "@angular/cli": "^19.0.6",
-    "@angular/compiler-cli": "^19.0.5",
-    "@angular/language-service": "^19.0.5",
+    "@angular-devkit/build-angular": "^20.0.0",
+    "@angular-devkit/schematics": "^20.0.0",
+    "@angular-devkit/schematics-cli": "^20.0.0",
+    "@angular-eslint/builder": "19.6.0",
+    "@angular-eslint/eslint-plugin": "19.6.0",
+    "@angular-eslint/eslint-plugin-template": "19.6.0",
+    "@angular-eslint/schematics": "19.6.0",
+    "@angular-eslint/template-parser": "19.6.0",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/language-service": "^20.0.0",
     "@types/fs-extra": "^11.0.4",
-    "@types/jasmine": "~5.1.5",
+    "@types/jasmine": "~5.1.8",
     "@types/jasminewd2": "~2.0.13",
-    "@types/node": "^22.10.2",
-    "@typescript-eslint/eslint-plugin": "^8.19.0",
-    "@typescript-eslint/parser": "^8.19.0",
-    "eslint": "^9.17.0",
-    "fs-extra": "^11.2.0",
+    "@types/node": "^22.15.29",
+    "@typescript-eslint/eslint-plugin": "^8.33.0",
+    "@typescript-eslint/parser": "^8.33.0",
+    "eslint": "^9.28.0",
+    "fs-extra": "^11.3.0",
     "husky": "^9.1.7",
-    "jasmine-core": "~5.5.0",
+    "jasmine-core": "~5.7.1",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "lint-staged": "^15.3.0",
-    "ng-packagr": "^19.0.1",
-    "prettier": "^3.4.2",
+    "lint-staged": "^16.1.0",
+    "ng-packagr": "^20.0.0",
+    "prettier": "^3.5.3",
     "protractor": "~7.0.0",
     "tslint-config-prettier": "^1.18.0",
-    "tsx": "^4.19.2",
-    "typescript": "^5.6.3"
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3"
   },
   "homepage": "https://github.com/bartholomej/ngx-scrolltop",
   "license": "MIT",

projects/demo/src/app/app.component.html

@@ -6,9 +6,9 @@
     width="40"
     alt="Angular Logo"
     src="https://raw.githubusercontent.com/bartholomej/ngx-scrolltop/HEAD/_assets/ngx-scrolltop_logo.svg?sanitize=true"
-  />
+    />
   <span>Demo page for ngx-scroltop</span>
-    <div class="spacer"></div>
+  <div class="spacer"></div>
   <a aria-label="ngx-scrolltop on github" target="_blank" rel="noopener" href="https://github.com/bartholomej/ngx-scrolltop" title="Github">
 
     <svg id="github-logo" aria-hidden="true" height="24" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
@@ -27,7 +27,7 @@
       width="24"
       alt="ngx-scrolltop logo"
       src="https://raw.githubusercontent.com/bartholomej/ngx-scrolltop/HEAD/_assets/ngx-scrolltop_logo.svg?sanitize=true"
-    />
+      />
 
     <span>ngx-scrolltop v{{ version.TAG }}</span>
 
@@ -50,7 +50,7 @@ <h3>Choose your style:</h3>
 
     <a routerLink="directive-way">
       <div class="card card-small" tabindex="0">
-          <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
         <span>Directive</span>
       </div>
     </a>
@@ -62,22 +62,24 @@ <h3 class="muted">
     Dummy text
   </h3>
 
-  <p class="muted" *ngFor="let i of iterations">
-    {{ lipsum }}
-  </p>
+  @for (i of iterations; let idx = $index; track idx) {
+    <p class="muted">
+      {{ lipsum }}
+    </p>
+  }
 
   <!-- Footer -->
   <footer>
-      Love this library?&nbsp;
-      <a href="https://github.com/bartholomej/ngx-scrolltop" target="_blank" rel="noopener"> Give our repo a star.
-        <div class="github-star-badge">
-            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
-          Star
-        </div>
-      </a>
-      <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
-        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-      </a>
+    Love this library?&nbsp;
+    <a href="https://github.com/bartholomej/ngx-scrolltop" target="_blank" rel="noopener"> Give our repo a star.
+      <div class="github-star-badge">
+        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+        Star
+      </div>
+    </a>
+    <a href="https://github.com/angular/angular" target="_blank" rel="noopener">
+      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+    </a>
   </footer>
 
   <svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">

projects/demo/src/app/app.component.spec.ts

@@ -19,7 +19,7 @@ describe('AppComponent', () => {
       ],
       declarations: [AppComponent],
     }).compileComponents();
-    router = TestBed.get(Router);
+    router = TestBed.inject(Router);
     router.initialNavigation();
   }));
 

projects/ngx-scrolltop/README.md

@@ -13,22 +13,21 @@
 > No dependencies.
 > **Pure Angular!**
 
-> ✓ **Angular 19**, Angular Universal (**SSR**) a **Standalone Components** compatible
+> ✓ **Angular 20**, **Signals**, **Standalone Components** and Angular Universal (**SSR**) compatible
 
 Just hit the button to smoothly scroll back to the top of the page. [Here's the demo.](http://bartholomej.github.io/ngx-scrolltop/)
 
+- No dependencies! _(only smooth scroll-behavior polyfill for old iOS versions)_
 - Lightweight _(~2 kB gzipped)_
-- **Angular 19** compatible
+- **Angular 20** compatible
 - **Standalone Components** compatible
-- Signals compatible
-- No dependencies! _(only smooth scroll-behavior polyfill for iOS)_
+- **Signals** compatible
 - Material Design inspired
 - `@angular/material` compatible ([example](#angular-material-example-directive))
 - Component or directive way
 - Smoothly animated
 - a11y ready
 - Highly customizable [options](#%EF%B8%8F-options)...
-- [Angular 5+ compatible](#compatibility)
 
 ![Demo animation](https://github.com/bartholomej/material-scrollTop/blob/master/demo/images/material-scrolltop-animation.gif?raw=true)
 
@@ -55,7 +54,8 @@ npm install ngx-scrolltop --save # for lastest Angular only! See our compatibili
 
 | Angular version | ngx-scrolltop | Install                            |
 | --------------- | ------------- | ---------------------------------- |
-| ng19            | v19.x.x       | `npm install ngx-scrolltop@latest` |
+| ng20            | v20.x.x       | `npm install ngx-scrolltop@latest` |
+| ng19            | v19.x.x       | `npm install ngx-scrolltop@19`     |
 | ng18            | v18.x.x       | `npm install ngx-scrolltop@18`     |
 | ng17            | v17.x.x       | `npm install ngx-scrolltop@17`     |
 | ng16            | v6.x.x        | `ng add ngx-scrolltop@6`           |
@@ -292,7 +292,7 @@ Or if you are brave enough consider [making a donation](https://github.com/spons
 
 ## 📝 License
 
-Copyright © 2023 [Lukas Bartak](http://bartweb.cz)
+Copyright © 2025 [Lukas Bartak](http://bartweb.cz)
 
 Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)
 

projects/ngx-scrolltop/package.json

@@ -4,8 +4,8 @@
   "description": "Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular!",
   "author": "Lukas Bartak <[email protected]> (https://github.com/bartholomej)",
   "peerDependencies": {
-    "@angular/common": ">=19 <20",
-    "@angular/core": ">=19 <20"
+    "@angular/common": ">=20 <21",
+    "@angular/core": ">=20 <21"
   },
   "dependencies": {
     "seamless-scroll-polyfill": "2.3.4"

projects/ngx-scrolltop/src/lib/ngx-scrolltop.core.service.spec.ts

@@ -1,4 +1,5 @@
-import { DOCUMENT } from '@angular/common';
+
+import { DOCUMENT } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { NgxScrollTopCoreService } from './ngx-scrolltop.core.service';
 

projects/ngx-scrolltop/src/lib/ngx-scrolltop.core.service.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from '@angular/common';
-import { inject, Injectable, signal } from '@angular/core';
+import { inject, Injectable, signal, DOCUMENT } from '@angular/core';
 import { polyfill as smoothscrollPolyfill } from 'seamless-scroll-polyfill';
 import { NgxScrollTopMode } from './ngx-scrolltop.interface';
 

tsconfig.json

@@ -8,7 +8,7 @@
     "declaration": false,
     "experimentalDecorators": true,
     "module": "es2020",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "typeRoots": ["node_modules/@types"],