Migrate to Angular 19

Author: PascalHonegger

.eslintrc.json

@@ -1,5 +1,13 @@
 # Changelog
 
+## 19.0.0 (2025-01-28)
+
+Changes
+
+- Use Angular 19 (closes #19)
+- Mark input `by` of `mfDefaultSorter` as required (breaking!)
+- Migrate to Signals (potentially breaking!)
+
 ## 18.0.0 (2024-08-06)
 
 Changes

CHANGELOG.md

@@ -1,8 +1,8 @@
 # Table component with sorting and pagination for Angular
-It is a forked version of [ng-datatable](https://github.com/cmglez10/ng-datatable) updated to Angular 17. The build pipeline was changed to Angular CLI, which should lead to smaller bundles and ivy compatibility.
+It is a forked version of [ng-datatable](https://github.com/cmglez10/ng-datatable) updated to Angular 19 and Signals.
 
 [![npm version](https://badge.fury.io/js/%40pascalhonegger%2Fng-datatable.svg)](https://badge.fury.io/js/%40pascalhonegger%2Fng-datatable)
 
 ## Installation & Usage example
 
-Detailed instructions are available in the [projects/ng-datatable directory](projects/ng-datatable/README.md).
+Detailed instructions are available in the [projects/ng-datatable directory](projects/ng-datatable/README.md).

README.md

@@ -2,7 +2,7 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "cli": {
     "analytics": false,
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": ["angular-eslint"]
   },
   "version": 1,
   "newProjectRoot": "projects",
@@ -43,7 +43,8 @@
             "lintFilePatterns": [
               "projects/ng-datatable/**/*.ts",
               "projects/ng-datatable/**/*.html"
-            ]
+            ],
+            "eslintConfig": "projects/ng-datatable/eslint.config.mjs"
           }
         }
       }
@@ -144,7 +145,8 @@
             "lintFilePatterns": [
               "projects/demo/**/*.ts",
               "projects/demo/**/*.html"
-            ]
+            ],
+            "eslintConfig": "projects/demo/eslint.config.mjs"
           }
         }
       }

angular.json

@@ -0,0 +1,37 @@
+// @ts-check
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import angularEslint from "angular-eslint";
+
+export default tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angularEslint.configs.tsRecommended,
+    ],
+    processor: angularEslint.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-class-suffix": "off",
+      "@angular-eslint/component-selector": "off",
+      "@angular-eslint/component-class-suffix": "off",
+      "@angular-eslint/no-conflicting-lifecycle": "off",
+      "@angular-eslint/no-input-rename": "off",
+      "@angular-eslint/no-output-rename": "off",
+      "@typescript-eslint/no-explicit-any": "off"
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angularEslint.configs.templateRecommended,
+      ...angularEslint.configs.templateAccessibility,
+    ],
+    rules: {
+      "@angular-eslint/template/click-events-have-key-events": "off",
+      "@angular-eslint/template/interactive-supports-focus": "off"
+    },
+  }
+);

eslint.config.mjs

@@ -1,7 +1,7 @@
 {
   "name": "ng-datatable",
   "version": "0.0.0",
-  "packageManager": "pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e",
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
   "scripts": {
     "ng": "ng",
     "start": "pnpm run build:lib && ng serve demo",
@@ -19,43 +19,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.1.3",
-    "@angular/common": "^18.1.3",
-    "@angular/compiler": "^18.1.3",
-    "@angular/core": "^18.1.3",
-    "@angular/forms": "^18.1.3",
-    "@angular/platform-browser": "^18.1.3",
-    "@angular/platform-browser-dynamic": "^18.1.3",
-    "@angular/router": "^18.1.3",
-    "bootstrap": "^5.3.2",
+    "@angular/animations": "^19.1.3",
+    "@angular/common": "^19.1.3",
+    "@angular/compiler": "^19.1.3",
+    "@angular/core": "^19.1.3",
+    "@angular/forms": "^19.1.3",
+    "@angular/platform-browser": "^19.1.3",
+    "@angular/platform-browser-dynamic": "^19.1.3",
+    "@angular/router": "^19.1.3",
+    "bootstrap": "^5.3.3",
     "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.2"
+    "tslib": "^2.8.1",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.3",
-    "@angular-eslint/builder": "^18.2.0",
-    "@angular-eslint/eslint-plugin": "^18.2.0",
-    "@angular-eslint/eslint-plugin-template": "^18.2.0",
-    "@angular-eslint/schematics": "^18.2.0",
-    "@angular-eslint/template-parser": "^18.2.0",
-    "@angular/cli": "^18.1.3",
-    "@angular/compiler-cli": "^18.1.3",
-    "@angular/language-service": "^18.1.3",
-    "@types/jasmine": "^5.1.2",
-    "@types/jasminewd2": "^2.0.13",
-    "@types/node": "^20.9.0",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "eslint": "^8.57.0",
-    "jasmine-core": "^5.1.1",
+    "@angular-devkit/build-angular": "^19.1.4",
+    "@angular/cli": "^19.1.4",
+    "@angular/compiler-cli": "^19.1.3",
+    "@angular/language-service": "^19.1.3",
+    "@types/jasmine": "^5.1.5",
+    "angular-eslint": "19.0.2",
+    "eslint": "^9.16.0",
+    "jasmine-core": "^5.5.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.2",
+    "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": "^18.1.0",
-    "typescript": "~5.5.4"
+    "ng-packagr": "^19.1.1",
+    "typescript": "~5.7.3",
+    "typescript-eslint": "8.18.0"
   }
-}
+}