Angular 18 update 🎉

README.md

@@ -13,12 +13,12 @@
 > No dependencies.
 > **Pure Angular!**
 
-> ✓ **Angular 17**, Angular Universal (**SSR**) a **Standalone Components** compatible
+> ✓ **Angular 18**, Angular Universal (**SSR**) a **Standalone Components** 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/)
 
 - Lightweight _(~2 kB gzipped)_
-- **Angular 17** compatible
+- **Angular 18** compatible
 - **Standalone Components** compatible
 - Signals compatible
 - No dependencies! _(only smooth scroll-behavior polyfill for iOS)_
@@ -53,15 +53,16 @@ npm install ngx-scrolltop --save # for lastest Angular only! See our compatibili
 
 ### Compatibility
 
-| Angular version | ngx-scrolltop | Install                       |
-| --------------- | ------------- | ----------------------------- |
-| ng17            | v17.x.x       | `ng add ngx-scrolltop@latest` |
-| ng16            | v6.x.x        | `ng add ngx-scrolltop@6`      |
-| ng15            | v6.x.x        | `ng add ngx-scrolltop@6`      |
-| ng14            | v4.x.x        | `ng add ngx-scrolltop@4`      |
-| ng13            | v4.x.x        | `ng add ngx-scrolltop@4`      |
-| ng12            | v4.x.x        | `ng add ngx-scrolltop@4`      |
-| ng5 – ng11      | v2.x.x        | `ng add ngx-scrolltop@2`      |
+| Angular version | ngx-scrolltop | Install                            |
+| --------------- | ------------- | ---------------------------------- |
+| ng18            | v18.x.x       | `npm install ngx-scrolltop@latest` |
+| ng17            | v17.x.x       | `npm install ngx-scrolltop@17`     |
+| ng16            | v6.x.x        | `ng add ngx-scrolltop@6`           |
+| ng15            | v6.x.x        | `ng add ngx-scrolltop@6`           |
+| ng14            | v4.x.x        | `ng add ngx-scrolltop@4`           |
+| ng13            | v4.x.x        | `ng add ngx-scrolltop@4`           |
+| ng12            | v4.x.x        | `ng add ngx-scrolltop@4`           |
+| ng5 – ng11      | v2.x.x        | `ng add ngx-scrolltop@2`           |
 
 ## 🗜️ Setup and usage (`Standalone` or `Modules`)
 

angular.json

@@ -59,12 +59,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser-esbuild",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/demo",
+            "outputPath": {
+              "base": "dist/demo"
+            },
             "index": "projects/demo/src/index.html",
-            "main": "projects/demo/src/main.ts",
-            "polyfills": "projects/demo/src/polyfills.ts",
+            "polyfills": [
+              "projects/demo/src/polyfills.ts"
+            ],
             "tsConfig": "projects/demo/tsconfig.app.json",
             "assets": [
               "projects/demo/src/favicon.ico",
@@ -75,11 +78,11 @@
             ],
             "scripts": [],
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true,
-            "aot": true
+            "aot": true,
+            "browser": "projects/demo/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -96,8 +99,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",

package.json

@@ -31,54 +31,54 @@
     "release:major": "git checkout master && npm version major -m \"chore(update): major release %s 💥 \""
   },
   "dependencies": {
-    "@angular/animations": "^17.0.6",
-    "@angular/common": "^17.0.6",
-    "@angular/compiler": "^17.0.6",
-    "@angular/core": "^17.0.6",
-    "@angular/forms": "^17.0.6",
-    "@angular/platform-browser": "^17.0.6",
-    "@angular/platform-browser-dynamic": "^17.0.6",
-    "@angular/router": "^17.0.6",
+    "@angular/animations": "^18.0.3",
+    "@angular/common": "^18.0.3",
+    "@angular/compiler": "^18.0.3",
+    "@angular/core": "^18.0.3",
+    "@angular/forms": "^18.0.3",
+    "@angular/platform-browser": "^18.0.3",
+    "@angular/platform-browser-dynamic": "^18.0.3",
+    "@angular/router": "^18.0.3",
     "rxjs": "^7.4.0",
     "seamless-scroll-polyfill": "^2.3.4",
-    "tslib": "^2.3.1",
-    "zone.js": "~0.14.2"
+    "tslib": "^2.6.3",
+    "zone.js": "~0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.7",
-    "@angular-devkit/schematics": "^17.0.7",
-    "@angular-devkit/schematics-cli": "^17.0.7",
-    "@angular-eslint/builder": "17.1.1",
-    "@angular-eslint/eslint-plugin": "17.1.1",
-    "@angular-eslint/eslint-plugin-template": "17.1.1",
-    "@angular-eslint/schematics": "17.1.1",
-    "@angular-eslint/template-parser": "17.1.1",
-    "@angular/cli": "^17.0.7",
-    "@angular/compiler-cli": "^17.0.6",
-    "@angular/language-service": "^17.0.6",
+    "@angular-devkit/build-angular": "^18.0.4",
+    "@angular-devkit/schematics": "^18.0.4",
+    "@angular-devkit/schematics-cli": "^18.0.3",
+    "@angular-eslint/builder": "18.0.1",
+    "@angular-eslint/eslint-plugin": "18.0.1",
+    "@angular-eslint/eslint-plugin-template": "18.0.1",
+    "@angular-eslint/schematics": "18.0.1",
+    "@angular-eslint/template-parser": "18.0.1",
+    "@angular/cli": "^18.0.4",
+    "@angular/compiler-cli": "^18.0.3",
+    "@angular/language-service": "^18.0.3",
     "@types/fs-extra": "^11.0.4",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.13",
-    "@types/node": "^20.10.4",
-    "@typescript-eslint/eslint-plugin": "6.14.0",
-    "@typescript-eslint/parser": "6.14.0",
-    "eslint": "^8.54.0",
+    "@types/node": "^20.14.2",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "eslint": "^8.57.0",
     "fs-extra": "^11.2.0",
-    "husky": "^8.0.3",
-    "jasmine-core": "~5.1.1",
+    "husky": "^9.0.11",
+    "jasmine-core": "~5.1.2",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.2",
+    "karma": "~6.4.3",
     "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.2.0",
-    "ng-packagr": "^17.0.2",
-    "prettier": "^3.1.0",
+    "lint-staged": "^15.2.5",
+    "ng-packagr": "^18.0.0",
+    "prettier": "^3.3.1",
     "protractor": "~7.0.0",
     "tslint-config-prettier": "^1.18.0",
-    "tsx": "^4.6.2",
-    "typescript": "~5.2.2"
+    "tsx": "^4.13.2",
+    "typescript": "~5.4.5"
   },
   "homepage": "https://github.com/bartholomej/ngx-scrolltop",
   "license": "MIT",
@@ -108,6 +108,9 @@
     "angular15",
     "angular16",
     "angular17",
+    "angular18",
+    "standalone",
+    "signals",
     "smooth",
     "esm",
     "sass"
@@ -121,4 +124,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   }
-}
+}

projects/ngx-scrolltop/README.md

@@ -13,12 +13,12 @@
 > No dependencies.
 > **Pure Angular!**
 
-> ✓ **Angular 17**, Angular Universal (**SSR**) a **Standalone Components** compatible
+> ✓ **Angular 18**, Angular Universal (**SSR**) a **Standalone Components** 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/)
 
 - Lightweight _(~2 kB gzipped)_
-- **Angular 17** compatible
+- **Angular 18** compatible
 - **Standalone Components** compatible
 - Signals compatible
 - No dependencies! _(only smooth scroll-behavior polyfill for iOS)_
@@ -53,15 +53,16 @@ npm install ngx-scrolltop --save # for lastest Angular only! See our compatibili
 
 ### Compatibility
 
-| Angular version | ngx-scrolltop | Install                       |
-| --------------- | ------------- | ----------------------------- |
-| ng17            | v17.x.x       | `ng add ngx-scrolltop@latest` |
-| ng16            | v6.x.x        | `ng add ngx-scrolltop@6`      |
-| ng15            | v6.x.x        | `ng add ngx-scrolltop@6`      |
-| ng14            | v4.x.x        | `ng add ngx-scrolltop@4`      |
-| ng13            | v4.x.x        | `ng add ngx-scrolltop@4`      |
-| ng12            | v4.x.x        | `ng add ngx-scrolltop@4`      |
-| ng5 – ng11      | v2.x.x        | `ng add ngx-scrolltop@2`      |
+| Angular version | ngx-scrolltop | Install                            |
+| --------------- | ------------- | ---------------------------------- |
+| ng18            | v18.x.x       | `npm install ngx-scrolltop@latest` |
+| ng17            | v17.x.x       | `npm install ngx-scrolltop@17`     |
+| ng16            | v6.x.x        | `ng add ngx-scrolltop@6`           |
+| ng15            | v6.x.x        | `ng add ngx-scrolltop@6`           |
+| ng14            | v4.x.x        | `ng add ngx-scrolltop@4`           |
+| ng13            | v4.x.x        | `ng add ngx-scrolltop@4`           |
+| ng12            | v4.x.x        | `ng add ngx-scrolltop@4`           |
+| ng5 – ng11      | v2.x.x        | `ng add ngx-scrolltop@2`           |
 
 ## 🗜️ Setup and usage (`Standalone` or `Modules`)
 

projects/ngx-scrolltop/package.json

@@ -35,6 +35,9 @@
     "angular15",
     "angular16",
     "angular17",
+    "angular18",
+    "standalone",
+    "signals",
     "smooth",
     "esm",
     "sass"

projects/ngx-scrolltop/src/lib/ngx-scrolltop.component.html

@@ -1,31 +1,34 @@
-<button
-  *ngIf="show()"
-  type="button"
-  role="button"
-  aria-label="Scroll to top of the page"
-  tabindex="0"
-  class="scrolltop-button"
-  #scrollTopButton
-  (click)="scrollToTop()"
-  [ngClass]="theme"
-  [style.left]="position === 'left' ? '20px' : ''"
-  [style.backgroundColor]="backgroundColor"
-  [style.width.px]="size"
-  [style.height.px]="size">
-  <div class="symbol-container">
-    <span #ref>
-      <ng-content></ng-content>
-    </span>
-    <svg *ngIf="ref.childNodes.length === 0"
-      aria-hidden="true"
-      [style.fill]="symbolColor"
-      focusable="false"
-      role="img"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 448 512">
-      <path
-        d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z">
-      </path>
-    </svg>
-  </div>
-</button>
+@if (show()) {
+  <button
+    type="button"
+    role="button"
+    aria-label="Scroll to top of the page"
+    tabindex="0"
+    class="scrolltop-button"
+    #scrollTopButton
+    (click)="scrollToTop()"
+    [ngClass]="theme()"
+    [style.left]="position() === 'left' ? '20px' : ''"
+    [style.backgroundColor]="backgroundColor()"
+    [style.width.px]="size()"
+    [style.height.px]="size()">
+    <div class="symbol-container">
+      <span #ref>
+        <ng-content></ng-content>
+      </span>
+      @if (ref.childNodes.length === 0) {
+        <svg 
+          aria-hidden="true"
+          [style.fill]="symbolColor()"
+          focusable="false"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512">
+          <path
+            d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z">
+          </path>
+        </svg>
+      }
+    </div>
+  </button>
+}

projects/ngx-scrolltop/src/lib/ngx-scrolltop.component.spec.ts

@@ -1,10 +1,11 @@
-import { ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, ComponentRef } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NgxScrollTopComponent } from './ngx-scrolltop.component';
 import { NgxScrollTopCoreService } from './ngx-scrolltop.core.service';
 
 describe('NgxScrollTopComponent', () => {
   let component: NgxScrollTopComponent;
+  let componentRef: ComponentRef<NgxScrollTopComponent>;
   let fixture: ComponentFixture<NgxScrollTopComponent>;
   let element: HTMLButtonElement;
   let cdRef: ChangeDetectorRef;
@@ -19,6 +20,7 @@ describe('NgxScrollTopComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(NgxScrollTopComponent);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
     component.show.set(true);
     fixture.detectChanges();
     element = fixture.nativeElement.querySelector('.scrolltop-button');
@@ -29,23 +31,22 @@ describe('NgxScrollTopComponent', () => {
     expect(component).toBeTruthy();
   });
 
-
   it('should set backgroundColor', () => {
-    component.backgroundColor = '#1b5e20';
+    componentRef.setInput('backgroundColor', '#1b5e20');
     cdRef.detectChanges();
 
     expect(element.style.backgroundColor).toEqual('rgb(27, 94, 32)');
   });
 
   it('should set backgroundColor with alpha', () => {
-    component.backgroundColor = '#212121cc';
+    componentRef.setInput('backgroundColor', '#212121cc');
     cdRef.detectChanges();
 
     expect(element.style.backgroundColor).toEqual('rgba(33, 33, 33, 0.8)');
   });
 
   it('should set symbolColor', () => {
-    component.symbolColor = '#FF6F00';
+    componentRef.setInput('symbolColor', '#FF6F00');
     cdRef.detectChanges();
 
     expect(
@@ -54,7 +55,7 @@ describe('NgxScrollTopComponent', () => {
   });
 
   it('should set size', () => {
-    component.size = 55;
+    componentRef.setInput('size', 55);
     cdRef.detectChanges();
 
     expect(element.style.width).toEqual('55px');
@@ -63,14 +64,14 @@ describe('NgxScrollTopComponent', () => {
   });
 
   it('should set position', () => {
-    component.position = 'left';
+    componentRef.setInput('position', 'left');
     cdRef.detectChanges();
 
     expect(element.style.left).toEqual('20px');
   });
 
   it('should set theme', () => {
-    component.theme = 'deeppurple';
+    componentRef.setInput('theme', 'deeppurple');
     cdRef.detectChanges();
 
     const computedStyle = window.getComputedStyle(element);