feat: support angular 21

package.json

@@ -7,7 +7,7 @@
     "build": "ng build",
     "build:lib": "npm run build:lib:prod",
     "build:lib:prod": "ng build @swimlane/ngx-datatable --configuration production",
-    "copy-files": "cp docs/CHANGELOG.md dist/swimlane/ngx-datatable/CHANGELOG.md && cp README.md dist/swimlane/ngx-datatable/README.md && cp LICENSE dist/swimlane/ngx-datatable/LICENSE && cpx \"src/assets/**/*\" \"dist/swimlane/ngx-datatable/assets\" && cpx \"projects/swimlane/ngx-datatable/src/lib/themes/**/*\" \"dist/swimlane/ngx-datatable/themes\"",
+    "copy-files": "cpx docs/CHANGELOG.md dist/swimlane/ngx-datatable && cpx README.md dist/swimlane/ngx-datatable && cpx LICENSE dist/swimlane/ngx-datatable && cpx \"src/assets/**/*\" \"dist/swimlane/ngx-datatable/assets\" && cpx \"projects/swimlane/ngx-datatable/src/lib/themes/**/*\" \"dist/swimlane/ngx-datatable/themes\"",
     "build:css": "scss-bundle -c ./scss-bundle.config.json && sass --no-source-map dist/swimlane/ngx-datatable",
     "test": "yarn lint && yarn test:unit",
     "test:unit": "ng test @swimlane/ngx-datatable --watch=false",
@@ -31,71 +31,71 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.0.5",
-    "@angular/cdk": "^20.0.4",
-    "@angular/common": "^20.0.5",
-    "@angular/compiler": "^20.0.5",
-    "@angular/core": "^20.0.5",
-    "@angular/forms": "^20.0.5",
-    "@angular/platform-browser": "^20.0.5",
-    "@angular/platform-browser-dynamic": "^20.0.5",
-    "@angular/router": "^20.0.5",
-    "rxjs": "~7.8.1",
-    "tslib": "~2.4.0",
-    "zone.js": "~0.15.0"
+    "@angular/animations": "^21.1.0",
+    "@angular/cdk": "^21.1.0",
+    "@angular/common": "^21.1.0",
+    "@angular/compiler": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@angular/forms": "^21.1.0",
+    "@angular/platform-browser": "^21.1.0",
+    "@angular/platform-browser-dynamic": "^21.1.0",
+    "@angular/router": "^21.1.0",
+    "rxjs": "~7.8.2",
+    "tslib": "~2.8.1",
+    "zone.js": "~0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.0.4",
-    "@angular-devkit/core": "^20.0.4",
-    "@angular-devkit/schematics": "^20.0.4",
-    "@angular-eslint/builder": "^20.1.1",
-    "@angular-eslint/eslint-plugin": "^20.1.1",
-    "@angular-eslint/eslint-plugin-template": "^20.1.1",
-    "@angular-eslint/schematics": "^20.1.1",
-    "@angular-eslint/template-parser": "^20.1.1",
-    "@angular/cli": "^20.0.4",
-    "@angular/compiler-cli": "^20.0.5",
-    "@angular/language-service": "^20.0.5",
+    "@angular-devkit/build-angular": "^21.1.0",
+    "@angular-devkit/core": "^21.1.0",
+    "@angular-devkit/schematics": "^21.1.0",
+    "@angular-eslint/builder": "^21.1.0",
+    "@angular-eslint/eslint-plugin": "^21.1.0",
+    "@angular-eslint/eslint-plugin-template": "^21.1.0",
+    "@angular-eslint/schematics": "^21.1.0",
+    "@angular-eslint/template-parser": "^21.1.0",
+    "@angular/cli": "^21.1.0",
+    "@angular/compiler-cli": "^21.1.0",
+    "@angular/language-service": "^21.1.0",
     "@swimlane/eslint-config": "^2.0.0",
-    "@swimlane/prettier-config-swimlane": "^3.0.2",
+    "@swimlane/prettier-config-swimlane": "^3.0.3",
     "@types/jasmine": "4.3.0",
     "@types/node": "16.11.59",
-    "@typescript-eslint/eslint-plugin": "8.23.0",
-    "@typescript-eslint/parser": "8.23.0",
-    "@typescript-eslint/types": "8.23.0",
-    "@typescript-eslint/utils": "8.23.0",
-    "@web/test-runner": "^0.19.0",
-    "angular-cli-ghpages": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "8.53.1",
+    "@typescript-eslint/parser": "8.53.1",
+    "@typescript-eslint/types": "8.53.1",
+    "@typescript-eslint/utils": "8.53.1",
+    "@web/test-runner": "^0.20.2",
+    "angular-cli-ghpages": "^3.0.2",
     "cpx": "^1.5.0",
-    "cross-env": "^7.0.2",
+    "cross-env": "^10.1.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-babel": "5.3.1",
     "eslint-plugin-cypress": "^3.3.0",
-    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsdoc": "39.3.6",
-    "eslint-plugin-no-only-tests": "3.0.0",
+    "eslint-plugin-no-only-tests": "3.3.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-security": "1.5.0",
     "husky": "^4.2.4",
     "jasmine": "^3.5.0",
     "jasmine-core": "4.4.0",
     "jasmine-spec-reporter": "7.0.0",
-    "karma": "6.4.0",
-    "karma-chrome-launcher": "3.1.1",
-    "karma-coverage": "2.2.0",
+    "karma": "6.4.4",
+    "karma-chrome-launcher": "3.2.0",
+    "karma-coverage": "2.2.1",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "5.1.0",
-    "karma-jasmine-html-reporter": "2.0.0",
-    "ng-packagr": "^20.0.1",
+    "karma-jasmine-html-reporter": "2.1.0",
+    "ng-packagr": "^21.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "2.7.1",
+    "prettier": "3.8.0",
     "pretty-quick": "3.1.3",
     "protractor": "~7.0.0",
-    "sass": "^1.77.6",
-    "scss-bundle": "^3.1.1",
-    "ts-node": "10.9.1",
-    "typescript": "5.8.3"
+    "sass": "^1.97.2",
+    "scss-bundle": "^3.1.2",
+    "ts-node": "10.9.2",
+    "typescript": "5.9.3"
   },
   "husky": {
     "hooks": {

projects/swimlane/ngx-datatable/.eslintrc.json

@@ -25,7 +25,7 @@
           {
             "type": "attribute",
             "prefix": "",
-            "style": "camelCase"
+            "style": "kebab-case"
           }
         ]
       }

projects/swimlane/ngx-datatable/package.json

@@ -3,9 +3,9 @@
   "version": "22.0.0",
   "description": "ngx-datatable is an Angular table grid component for presenting large and complex data.",
   "peerDependencies": {
-    "@angular/common": "18.x || 19.x || 20.x",
-    "@angular/core": "18.x || 19.x || 20.x",
-    "@angular/platform-browser": "18.x || 19.x || 20.x",
+    "@angular/common": "18.x || 19.x || 20.x || 21.x",
+    "@angular/core": "18.x || 19.x || 20.x || 21.x",
+    "@angular/platform-browser": "18.x || 19.x || 20.x || 21.x",
     "rxjs": "7.x"
   },
   "dependencies": {

projects/swimlane/ngx-datatable/src/lib/components/body/body-group-header.directive.ts

@@ -3,6 +3,7 @@ import { DatatableGroupHeaderTemplateDirective } from './body-group-header-templ
 import { Group, GroupContext, GroupToggleEvents, Row } from '../../types/public.types';
 
 @Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
   selector: 'ngx-datatable-group-header'
 })
 export class DatatableGroupHeaderDirective<TRow extends Row = any> {

projects/swimlane/ngx-datatable/src/lib/components/body/body-row-def.component.ts

@@ -36,6 +36,7 @@ export class DatatableRowDefComponent {
 }
 
 @Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
   selector: '[rowDef]'
 })
 export class DatatableRowDefDirective {
@@ -51,6 +52,7 @@ export class DatatableRowDefDirective {
  * @internal To be used internally by ngx-datatable.
  */
 @Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
   selector: '[rowDefInternal]'
 })
 export class DatatableRowDefInternalDirective implements OnInit {

projects/swimlane/ngx-datatable/src/lib/components/columns/column.directive.ts

@@ -18,6 +18,7 @@ import { DataTableColumnGhostCellDirective } from './column-ghost-cell.directive
 import { CellContext, HeaderCellContext, Row } from '../../types/public.types';
 
 @Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
   selector: 'ngx-datatable-column'
 })
 export class DataTableColumnDirective<TRow extends Row> implements TableColumn, OnChanges {

projects/swimlane/ngx-datatable/src/lib/components/footer/footer.directive.ts

@@ -3,6 +3,7 @@ import { DataTableFooterTemplateDirective } from './footer-template.directive';
 import { FooterContext } from '../../types/public.types';
 
 @Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
   selector: 'ngx-datatable-footer'
 })
 export class DatatableFooterDirective {

projects/swimlane/ngx-datatable/src/lib/components/row-detail/row-detail.directive.ts

@@ -3,6 +3,7 @@ import { DatatableRowDetailTemplateDirective } from './row-detail-template.direc
 import { DetailToggleEvents, Row, RowDetailContext } from '../../types/public.types';
 
 @Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
   selector: 'ngx-datatable-row-detail'
 })
 export class DatatableRowDetailDirective<TRow extends Row = any> {

projects/swimlane/ngx-datatable/src/lib/directives/visibility.directive.ts

@@ -22,6 +22,7 @@ import {
  *
  */
 @Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
   selector: '[visibilityObserver]'
 })
 export class VisibilityDirective implements OnInit, OnDestroy {

projects/swimlane/ngx-datatable/tsconfig.lib.json

@@ -5,8 +5,7 @@
     "declarationMap": true,
     "declaration": true,
     "inlineSources": true,
-    "types": [],
-    "lib": ["dom", "es2022"]
+    "types": []
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

projects/swimlane/ngx-datatable/tsconfig.spec.json

@@ -2,8 +2,9 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../out-tsc/spec",
-    "types": ["jasmine"],
-    "lib": ["dom", "es2022"]
+    "types": [
+      "jasmine"
+    ]
   },
   "files": ["src/test.ts"],
   "include": ["**/*.spec.ts", "**/*.d.ts"]

src/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>ngx-datatable - Angular component for presenting large and complex data</title>

src/main.ts

@@ -1,19 +1,20 @@
-import { enableProdMode } from '@angular/core';
-
-import { environment } from './environments/environment';
 import { provideHttpClient } from '@angular/common/http';
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter, withHashLocation } from '@angular/router';
+
+import { environment } from './environments/environment';
 import { routes } from './app/app-routing.module';
 import { providedNgxDatatableConfig } from 'projects/swimlane/ngx-datatable/src/public-api';
 import { AppComponent } from './app/app.component';
-import { provideRouter, withHashLocation } from '@angular/router';
 
 if (environment.production) {
   enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
   providers: [
+    provideZoneChangeDetection(),
     providedNgxDatatableConfig({
       messages: {
         emptyMessage: 'No data to display', // Message to show when array is presented, but contains no values

tsconfig.json

@@ -7,17 +7,22 @@
     "declaration": false,
     "experimentalDecorators": true,
     "module": "es2020",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "es2022",
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["es2022", "dom"],
+    "typeRoots": [
+      "node_modules/@types"
+    ],
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "noUnusedLocals": true,
     "paths": {
-      "@swimlane/ngx-datatable": ["dist/swimlane/ngx-datatable"],
-      "@swimlane/ngx-datatable/*": ["dist/swimlane/ngx-datatable/*"]
+      "@swimlane/ngx-datatable": [
+        "dist/swimlane/ngx-datatable"
+      ],
+      "@swimlane/ngx-datatable/*": [
+        "dist/swimlane/ngx-datatable/*"
+      ]
     },
     "useDefineForClassFields": false,
     "strictFunctionTypes": true