Merge pull request #23 from PascalHonegger/22-add-support-for-angular-21

Migrate to Angular 21, signals-only and zoneless, closes #22

Author: PascalHonegger

.github/workflows/tests.yml

@@ -0,0 +1,48 @@
+name: ng-datatable build and test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install
+      - run: pnpm lint
+      - run: pnpm format:check
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install
+      - run: pnpm build:lib
+      - run: pnpm build:demo
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install
+      - run: pnpm test

CHANGELOG.md

@@ -1,12 +1,34 @@
 # Changelog
 
+## 21.0.0 (2026-01-01)
+
+Changes
+
+- Support zoneless and signals (closes #21) **Breaking Change** ❗
+- Mark input `rowsOnPageSet` of `mfBootstrapPaginator` as required (potentially breaking!)
+- Less runtime checks for invalid `sortOrder` (potentially breaking!)
+- Deprecate `DataTableModule`
+- Use Angular 21 (closes #22)
+
+The main API hasn't changed with signals, but **application code will need minor adjustments**, for example:
+
+```html
+<!-- OLD -->
+@for (item of mf.data; track item) { }
+
+<!-- NEW -->
+@for (item of mf.data(); track item) { }
+```
+
+Some order of outputs could also have changed with the new signals based implementation, make sure to verify your application after updating!
+
 ## 20.0.0 (2025-06-20)
 
 Changes
 
 - Use Angular 20 (closes #20)
 
-*Note: This library does not work with zoneless at the moment, contributions are welcome!*
+_Note: This library does not work with zoneless at the moment, contributions are welcome!_
 
 ## 19.0.0 (2025-01-28)
 

angular.json

@@ -2,6 +2,7 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "cli": {
     "analytics": false,
+    "packageManager": "pnpm",
     "schematicCollections": ["angular-eslint"]
   },
   "version": 1,
@@ -28,14 +29,7 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular/build:karma",
-          "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "projects/ng-datatable/tsconfig.spec.json"
-          }
+          "builder": "@angular/build:unit-test"
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
@@ -85,9 +79,6 @@
             "outputPath": "dist/demo",
             "index": "projects/demo/src/index.html",
             "browser": "projects/demo/src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
             "tsConfig": "projects/demo/tsconfig.app.json",
             "assets": [
               "projects/demo/src/data.json"

eslint.config.mjs

@@ -1,16 +1,19 @@
 // @ts-check
+import { defineConfig } from 'eslint/config';
 import eslint from "@eslint/js";
 import tseslint from "typescript-eslint";
 import angularEslint from "angular-eslint";
+import eslintConfigPrettier from "eslint-config-prettier/flat";
 
-export default tseslint.config(
+export default defineConfig(
   {
     files: ["**/*.ts"],
     extends: [
       eslint.configs.recommended,
       ...tseslint.configs.recommended,
       ...tseslint.configs.stylistic,
       ...angularEslint.configs.tsRecommended,
+      eslintConfigPrettier
     ],
     processor: angularEslint.processInlineTemplates,
     rules: {
@@ -28,6 +31,7 @@ export default tseslint.config(
     extends: [
       ...angularEslint.configs.templateRecommended,
       ...angularEslint.configs.templateAccessibility,
+      eslintConfigPrettier
     ],
     rules: {
       "@angular-eslint/template/click-events-have-key-events": "off",

package.json

@@ -1,15 +1,18 @@
 {
   "name": "ng-datatable",
-  "version": "20.0.0",
-  "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac",
+  "version": "21.0.0-next.1",
+  "packageManager": "pnpm@10.26.2+sha512.0e308ff2005fc7410366f154f625f6631ab2b16b1d2e70238444dd6ae9d630a8482d92a451144debc492416896ed16f7b114a86ec68b8404b2443869e68ffda6",
   "scripts": {
     "ng": "ng",
     "start": "pnpm run build:lib && ng serve demo",
     "build:lib": "ng build ng-datatable",
+    "build:demo": "ng build demo",
     "test": "ng test",
     "lint": "ng lint",
     "publish:prod": "pnpm run build:lib && cd dist/ng-datatable && pnpm publish",
-    "publish:dev": "pnpm run build:lib && cd dist/ng-datatable && pnpm publish --tag dev"
+    "publish:next": "pnpm run build:lib && cd dist/ng-datatable && pnpm publish --tag next",
+    "format": "prettier --write projects/",
+    "format:check": "prettier --check projects/"
   },
   "author": "git@honegger.dev",
   "license": "MIT",
@@ -18,38 +21,48 @@
     "url": "git+https://github.com/PascalHonegger/ng-datatable.git"
   },
   "private": true,
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
   "dependencies": {
-    "@angular/animations": "^20.0.4",
-    "@angular/common": "^20.0.4",
-    "@angular/compiler": "^20.0.4",
-    "@angular/core": "^20.0.4",
-    "@angular/forms": "^20.0.4",
-    "@angular/platform-browser": "^20.0.4",
-    "@angular/platform-browser-dynamic": "^20.0.4",
-    "@angular/router": "^20.0.4",
-    "bootstrap": "^5.3.7",
+    "@angular/animations": "^21.0.6",
+    "@angular/common": "^21.0.6",
+    "@angular/compiler": "^21.0.6",
+    "@angular/core": "^21.0.6",
+    "@angular/forms": "^21.0.6",
+    "@angular/platform-browser": "^21.0.6",
+    "@angular/platform-browser-dynamic": "^21.0.6",
+    "@angular/router": "^21.0.6",
+    "bootstrap": "^5.3.8",
     "rxjs": "~7.8.2",
-    "tslib": "^2.8.1",
-    "zone.js": "~0.15.1"
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular/build": "^20.0.3",
-    "@angular/cli": "^20.0.3",
-    "@angular/compiler-cli": "^20.0.4",
-    "@angular/language-service": "^20.0.4",
-    "@eslint/js": "^9.29.0",
-    "@types/jasmine": "^5.1.8",
-    "angular-eslint": "20.1.1",
-    "eslint": "^9.29.0",
-    "jasmine-core": "^5.8.0",
+    "@angular/build": "^21.0.4",
+    "@angular/cli": "^21.0.4",
+    "@angular/compiler-cli": "^21.0.6",
+    "@angular/language-service": "^21.0.6",
+    "@eslint/js": "^9.39.2",
+    "@types/jasmine": "^5.1.13",
+    "angular-eslint": "21.1.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "jasmine-core": "^5.13.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^20.0.1",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.34.1"
+    "jsdom": "^27.4.0",
+    "ng-packagr": "^21.0.1",
+    "prettier": "^3.7.4",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.50.1",
+    "vitest": "^4.0.16"
   }
 }