chore: add angular v21 support #352 (#356)

Author: mart-sessman

.github/workflows/angular-test-and-lint.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
       - rc
+
 jobs:
   lint:
     runs-on: ubuntu-latest
@@ -37,6 +38,12 @@ jobs:
         run: |
           npm ci --cache .npm --prefer-offline
           npm run build
+      - name: Upload dist
+        uses: actions/upload-artifact@v4
+        with:
+          name: library-dist
+          path: dist/
+          retention-days: 1
 
   test:
     runs-on: ubuntu-latest
@@ -79,6 +86,50 @@ jobs:
           token: ${{ secrets.CODECOV_TOKEN }}
           working-directory: ./
 
+  compatibility:
+    needs: build
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        angular-version: [19, 20, 21]
+    name: compatibility (Angular ${{ matrix.angular-version }})
+    steps:
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+      - name: Download built library
+        uses: actions/download-artifact@v4
+        with:
+          name: library-dist
+          path: dist/
+      - name: Pack library tarball
+        run: cd dist && npm pack
+      - name: Create test app and verify build
+        run: |
+          npx @angular/cli@${{ matrix.angular-version }} new test-app \
+            --skip-git --skip-tests --style=scss --ssr=false --skip-install
+          cd test-app
+          npm install
+          npm install ../dist/*.tgz @angular/animations@${{ matrix.angular-version }} @angular/forms@${{ matrix.angular-version }} @angular/cdk@${{ matrix.angular-version }} ngx-float-ui@${{ matrix.angular-version }}
+
+          # Import a component to verify the library is consumable
+          cat > src/app/app.component.ts << 'EOF'
+          import { Component } from '@angular/core';
+          import { ButtonComponent } from '@tedi-design-system/angular/tedi';
+
+          @Component({
+            selector: 'app-root',
+            standalone: true,
+            imports: [ButtonComponent],
+            template: '<button tedi-button>Test</button>',
+          })
+          export class AppComponent {}
+          EOF
+
+          npx ng build
+
   chromatic:
     runs-on: ubuntu-latest
     if: |

README.md

@@ -30,9 +30,34 @@ To view and develop components in isolation, start Storybook for Angular:
 npm run start
 ```
 
+## Angular Version Support
+
+The library supports the three latest Angular major versions. Angular releases a new major every 6 months and deprecates versions after 18 months. See the [Angular release schedule](https://angular.dev/reference/releases) for upcoming dates.
+
+**Currently supported: Angular 19, 20, 21**
+
+CI runs build and test jobs against all supported versions using a matrix strategy. The base version (used for `npm ci`) is determined by `devDependencies` in `package.json` — the other versions are installed on top via `ng update`.
+
+### Adding a new Angular version
+
+When a new Angular major is released (e.g. v22):
+
+1. **`package.json`** — add `|| ^22.0.0` to every Angular peer dependency and `ngx-float-ui`
+2. **`.github/workflows/angular-test-and-lint.yml`** — add `22` to the `angular-version` matrix in the `build` and `test` jobs
+3. **`.github/workflows/angular-release.yml`** — add `22` to the `angular-version` matrix in the `test` job
+
+### Dropping a deprecated Angular version
+
+When an Angular major reaches end-of-life (e.g. v19):
+
+1. **`package.json`** — remove `^19.0.0 ||` from every Angular peer dependency and `ngx-float-ui`
+2. **`.github/workflows/angular-test-and-lint.yml`** — remove `19` from the `angular-version` matrix in the `build` and `test` jobs
+3. **`.github/workflows/angular-release.yml`** — remove `19` from the `angular-version` matrix in the `test` job
+4. Bump `devDependencies` to the new minimum supported Angular version so the library is always built and developed against a supported release
+
 ## Contributing
 
-Check the [wiki](https://github.com/TEDI-Design-System/general) for component guidelines and coding standards.  
+Check the [wiki](https://github.com/TEDI-Design-System/general) for component guidelines and coding standards.
 Report issues or contribute via [GitHub Issues](https://github.com/TEDI-Design-System/angular/issues).
 
 ---

package.json

@@ -23,13 +23,13 @@
     "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=build:sb --baseline-branch=rc --include=\"tedi/**/*.stories.*\""
   },
   "peerDependencies": {
-    "@angular/animations": "^19.0.0 || ^20.0.0",
-    "@angular/cdk": "^19.0.0 || ^20.0.0",
-    "@angular/common": "^19.0.0 || ^20.0.0",
-    "@angular/core": "^19.0.0 || ^20.0.0",
-    "@angular/forms": "^19.0.0 || ^20.0.0",
-    "@angular/platform-browser": "^19.0.0 || ^20.0.0",
-    "ngx-float-ui": "^19.0.1 || ^20.0.0"
+    "@angular/animations": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/cdk": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/forms": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/platform-browser": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "ngx-float-ui": "^19.0.1 || ^20.0.0 || ^21.0.0"
   },
   "dependencies": {
     "@tedi-design-system/core": "^3.0.1"