feat: Upgrades to Angular 21

.github/workflows/main.yml

@@ -16,7 +16,7 @@ jobs:
  - uses: actions/checkout@v4
  - uses: actions/setup-node@v4
  with:
- node-version: 22.12.x
+ node-version: 24.11.x
  - name: Install dependencies
  run: yarn --frozen-lockfile --non-interactive --no-progress
  - name: Lint Demo

README.md

@@ -55,6 +55,7 @@ npm i ngx-sub-form
 | `18.x` | `11.0.0` |
 | `19.x` | `12.0.0` |
 | `20.x` | `13.0.0` |
+| `21.x` | `14.0.0` |
 
 # API
 

angular.json

@@ -21,7 +21,7 @@
  "base": "dist/ngx-sub-form-demo"
  },
  "index": "src/index.html",
- "polyfills": ["src/polyfills.ts"],
+ "polyfills": ["zone.js"],
  "tsConfig": "src/tsconfig.app.json",
  "assets": ["src/favicon.ico", "src/assets"],
  "styles": ["src/styles.scss"],
@@ -81,7 +81,7 @@
  "builder": "@angular/build:karma",
  "options": {
  "main": "src/test.ts",
- "polyfills": "src/polyfills.ts",
+ "polyfills": ["zone.js", "zone.js/testing"],
  "tsConfig": "src/tsconfig.spec.json",
  "karmaConfig": "src/karma.conf.js",
  "styles": ["src/styles.scss"],

package.json

@@ -38,16 +38,16 @@
  },
  "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/material": "20.0.4",
- "@angular/platform-browser": "20.0.5",
- "@angular/platform-browser-dynamic": "20.0.5",
- "@angular/router": "20.0.5",
+ "@angular/animations": "21.0.1",
+ "@angular/cdk": "21.0.1",
+ "@angular/common": "21.0.1",
+ "@angular/compiler": "21.0.1",
+ "@angular/core": "21.0.1",
+ "@angular/forms": "21.0.1",
+ "@angular/material": "21.0.1",
+ "@angular/platform-browser": "21.0.1",
+ "@angular/platform-browser-dynamic": "21.0.1",
+ "@angular/router": "21.0.1",
  "@types/uuid": "9.0.0",
  "commitizen": "4.2.6",
  "core-js": "3.23.1",
@@ -60,22 +60,22 @@
  "zone.js": "0.15.0"
  },
  "devDependencies": {
- "@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/build": "^20.0.4",
- "@angular/cli": "20.0.4",
- "@angular/compiler-cli": "20.0.5",
- "@angular/language-service": "20.0.5",
+ "@angular-eslint/builder": "21.0.1",
+ "@angular-eslint/eslint-plugin": "21.0.1",
+ "@angular-eslint/eslint-plugin-template": "21.0.1",
+ "@angular-eslint/schematics": "21.0.1",
+ "@angular-eslint/template-parser": "21.0.1",
+ "@angular/build": "^21.0.1",
+ "@angular/cli": "21.0.1",
+ "@angular/compiler-cli": "21.0.1",
+ "@angular/language-service": "21.0.1",
  "@types/jasmine": "4.3.1",
  "@types/jasminewd2": "2.0.10",
  "@types/lodash": "4.14.191",
  "@types/lodash-es": "4.17.6",
  "@types/node": "22.10.2",
- "@typescript-eslint/eslint-plugin": "8.35.0",
- "@typescript-eslint/parser": "8.35.0",
+ "@typescript-eslint/eslint-plugin": "8.48.0",
+ "@typescript-eslint/parser": "8.48.0",
  "cypress": "13.16.1",
  "cz-conventional-changelog": "3.3.0",
  "embedme": "1.22.1",
@@ -92,13 +92,13 @@
  "karma-coverage-istanbul-reporter": "3.0.3",
  "karma-jasmine": "5.1.0",
  "karma-jasmine-html-reporter": "2.0.0",
- "ng-packagr": "20.0.1",
+ "ng-packagr": "21.0.0",
  "prettier": "2.7.1",
  "semantic-release": "19.0.5",
  "ts-node": "10.9.1",
  "tsconfig-paths-webpack-plugin": "3.5.2",
  "tsdef": "0.0.14",
- "typescript": "5.8.3"
+ "typescript": "5.9.3"
  },
  "repository": {
  "type": "git",

projects/ngx-sub-form/package.json

@@ -6,9 +6,9 @@
  "tslib": "^2.0.0"
  },
  "peerDependencies": {
- "@angular/common": "^20.0.0",
- "@angular/core": "^20.0.0",
- "@angular/forms": "^20.0.0",
+ "@angular/common": "^21.0.0",
+ "@angular/core": "^21.0.0",
+ "@angular/forms": "^21.0.0",
  "fast-deep-equal": "^3.1.3",
  "lodash-es": "^4.17.21",
  "ngx-observable-lifecycle": "^2.2.1",

projects/ngx-sub-form/tsconfig.lib.json

@@ -10,8 +10,7 @@
  "inlineSources": true,
  "experimentalDecorators": true,
  "importHelpers": true,
- "types": [],
- "lib": ["dom", "es2018"]
+ "types": []
  },
  "angularCompilerOptions": {
  "skipTemplateCodegen": true,

src/app/main/listing/listing-form/droid-listing/assassin-droid/assassin-droid.component.html

@@ -30,13 +30,11 @@
  multiple
  [formControlName]="form.formControlNames.weapons"
  >
- <mat-option
- data-select-weapons-option
- *ngFor="let weapon of AssassinDroidWeapon | keyvalue"
- [value]="weapon.value"
- >
+ @for (weapon of AssassinDroidWeapon | keyvalue; track weapon) {
+ <mat-option data-select-weapons-option [value]="weapon.value">
  {{ assassinDroidWeaponText[weapon.value] }}
  </mat-option>
+ }
  </mat-select>
  </mat-form-field>
 </fieldset>

src/app/main/listing/listing-form/droid-listing/astromech-droid/astromech-droid.component.html

@@ -27,9 +27,11 @@
 
  <mat-form-field>
  <mat-select placeholder="Select the droid shape" [formControlName]="form.formControlNames.shape">
- <mat-option *ngFor="let shape of AstromechDroidShape | keyvalue" [value]="shape.value">
+ @for (shape of AstromechDroidShape | keyvalue; track shape) {
+ <mat-option [value]="shape.value">
  {{ shape.value }}
  </mat-option>
+ }
  </mat-select>
  </mat-form-field>
 </fieldset>

src/app/main/listing/listing-form/droid-listing/droid-product.component.html

@@ -7,32 +7,23 @@
  placeholder="Select droid type"
  [formControlName]="form.formControlNames.droidType"
  >
- <mat-option
- data-select-droid-type-option
- *ngFor="let droidType of DroidType | keyvalue"
- [value]="droidType.value"
- >
+ @for (droidType of DroidType | keyvalue; track droidType) {
+ <mat-option data-select-droid-type-option [value]="droidType.value">
  {{ droidType.value }}
  </mat-option>
+ }
  </mat-select>
  </mat-form-field>
 
- <div [ngSwitch]="form.formGroup.value.droidType">
- <app-protocol-droid
- *ngSwitchCase="DroidType.PROTOCOL"
- [formControlName]="form.formControlNames.protocolDroid"
- ></app-protocol-droid>
- <app-medical-droid
- *ngSwitchCase="DroidType.MEDICAL"
- [formControlName]="form.formControlNames.medicalDroid"
- ></app-medical-droid>
- <app-astromech-droid
- *ngSwitchCase="DroidType.ASTROMECH"
- [formControlName]="form.formControlNames.astromechDroid"
- ></app-astromech-droid>
- <app-assassin-droid
- *ngSwitchCase="DroidType.ASSASSIN"
- [formControlName]="form.formControlNames.assassinDroid"
- ></app-assassin-droid>
+ <div>
+ @switch (form.formGroup.value.droidType) { @case (DroidType.PROTOCOL) {
+ <app-protocol-droid [formControlName]="form.formControlNames.protocolDroid"></app-protocol-droid>
+ } @case (DroidType.MEDICAL) {
+ <app-medical-droid [formControlName]="form.formControlNames.medicalDroid"></app-medical-droid>
+ } @case (DroidType.ASTROMECH) {
+ <app-astromech-droid [formControlName]="form.formControlNames.astromechDroid"></app-astromech-droid>
+ } @case (DroidType.ASSASSIN) {
+ <app-assassin-droid [formControlName]="form.formControlNames.assassinDroid"></app-assassin-droid>
+ } }
  </div>
 </fieldset>

src/app/main/listing/listing-form/droid-listing/protocol-droid/protocol-droid.component.html

@@ -21,9 +21,11 @@
  multiple
  [formControlName]="form.formControlNames.spokenLanguages"
  >
- <mat-option *ngFor="let language of Languages | keyvalue" [value]="language.value">
+ @for (language of Languages | keyvalue; track language) {
+ <mat-option [value]="language.value">
  {{ language.value }}
  </mat-option>
+ }
  </mat-select>
  </mat-form-field>
 </fieldset>

src/app/main/listing/listing-form/listing-form.component.html

@@ -8,12 +8,9 @@
  </mat-card-subtitle>
  </mat-card-header>
  <div class="img-container">
- <img
- *ngIf="form.formGroup.value.imageUrl"
- mat-card-image
- [src]="form.formGroup.value.imageUrl"
- alt="Photo of {{ form.formGroup.value.title }}"
- />
+ @if (form.formGroup.value.imageUrl) {
+ <img mat-card-image [src]="form.formGroup.value.imageUrl" alt="Photo of {{ form.formGroup.value.title }}" />
+ }
  </div>
  <mat-card-content>
  <form [formGroup]="form.formGroup">
@@ -30,7 +27,9 @@
 
  <!-- this is useful to make sure the type of the error is correct -->
  <!-- as it could be either an object or an array and AoT would notice if not correctly typed -->
- <mat-error data-input-id-error *ngIf="form.formGroupErrors?.id?.required">ID is required</mat-error>
+ @if (form.formGroupErrors?.id?.required) {
+ <mat-error data-input-id-error>ID is required</mat-error>
+ }
 
  <mat-form-field>
  <input
@@ -43,7 +42,9 @@
  />
  </mat-form-field>
 
- <mat-error data-input-title-error *ngIf="form.formGroupErrors?.title?.required">Title is required</mat-error>
+ @if (form.formGroupErrors?.title?.required) {
+ <mat-error data-input-title-error>Title is required</mat-error>
+ }
 
  <mat-form-field>
  <input
@@ -56,9 +57,9 @@
  />
  </mat-form-field>
 
- <mat-error data-input-image-url-error *ngIf="form.formGroupErrors?.imageUrl?.required">
-  Image url is required
- </mat-error>
+ @if (form.formGroupErrors?.imageUrl?.required) {
+ <mat-error data-input-image-url-error>Image url is required</mat-error>
+ }
 
  <mat-form-field>
  <input
@@ -71,53 +72,50 @@
  />
  </mat-form-field>
 
- <mat-error data-input-price-error *ngIf="form.formGroupErrors?.price?.required">Price is required</mat-error>
+ @if (form.formGroupErrors?.price?.required) {
+ <mat-error data-input-price-error>Price is required</mat-error>
+ }
 
  <mat-form-field>
  <mat-select
  data-select-listing-type
  placeholder="Select listing type"
  [formControlName]="form.formControlNames.listingType"
  >
- <mat-option
- data-select-listing-type-option
- *ngFor="let listingType of ListingType | keyvalue"
- [value]="listingType.value"
- >
+ @for (listingType of ListingType | keyvalue; track listingType) {
+ <mat-option data-select-listing-type-option [value]="listingType.value">
  {{ listingType.value }}
  </mat-option>
+ }
  </mat-select>
  </mat-form-field>
 
- <div [ngSwitch]="form.formGroup.value.listingType">
- <app-droid-product
- *ngSwitchCase="ListingType.DROID"
- [formControlName]="form.formControlNames.droidProduct"
- ></app-droid-product>
-
- <app-vehicle-product
- *ngSwitchCase="ListingType.VEHICLE"
- [formControlName]="form.formControlNames.vehicleProduct"
- ></app-vehicle-product>
+ <div>
+ @switch (form.formGroup.value.listingType) { @case (ListingType.DROID) {
+ <app-droid-product [formControlName]="form.formControlNames.droidProduct"></app-droid-product>
+ } @case (ListingType.VEHICLE) {
+ <app-vehicle-product [formControlName]="form.formControlNames.vehicleProduct"></app-vehicle-product>
+ } }
  </div>
  </form>
  </mat-card-content>
  <mat-card-actions>
  <!--
- `<div *ngIf="true">`... You could legitimely think that we're crazy or that ngx-sub-form
- is messing up with your form. In fact, it is not related to the lib at all. It has to do
- with how Angular analyze the DOM and the priorities during change detection.
- "But will I have to do that in my app too?" -*-*-> YES if you need to make a check based
- on the form validity.
- Please see that issue for more info
- https://github.com/angular/angular/issues/18004
- and that comment in particular
- https://github.com/angular/angular/issues/18004#issuecomment-328806479
- "But what if I don't do that?" -*-*-> Well you'll end up with the error we all know:
- `ExpressionChangedAfterItHasBeenCheckedError`. Please refer to comment if you want to
- know why
- -->
- <div *ngIf="true">
+ `<div *ngIf="true">`... You could legitimely think that we're crazy or that ngx-sub-form
+ is messing up with your form. In fact, it is not related to the lib at all. It has to do
+ with how Angular analyze the DOM and the priorities during change detection.
+ "But will I have to do that in my app too?" -*-*-> YES if you need to make a check based
+ on the form validity.
+ Please see that issue for more info
+ https://github.com/angular/angular/issues/18004
+ and that comment in particular
+ https://github.com/angular/angular/issues/18004#issuecomment-328806479
+ "But what if I don't do that?" -*-*-> Well you'll end up with the error we all know:
+ `ExpressionChangedAfterItHasBeenCheckedError`. Please refer to comment if you want to
+ know why
+ -->
+ @if (true) {
+ <div>
  <!-- @todo -->
  <button
  mat-raised-button
@@ -127,9 +125,11 @@
  >
  Upsert
  </button>
-
- <div *ngIf="form.formGroup.invalid" class="invalid-form">Form is invalid</div>
+ @if (form.formGroup.invalid) {
+ <div class="invalid-form">Form is invalid</div>
+ }
  </div>
+ }
  </mat-card-actions>
 </mat-card>
 
@@ -138,14 +138,14 @@
 
  <mat-card-content>
  <!--
- this is an important test as we want to make sure that `formGroupErrors` is null when there's no error
- if we return an empty object the `*ngIf` condition would be considered valid
- -->
- <pre *ngIf="form.formGroupErrors as errors; else noError" data-errors>{{ errors | json }}</pre>
-
- <ng-template #noError>
-  <span data-no-error>Form is valid, no error!</span>
- </ng-template>
+  this is an important test as we want to make sure that `formGroupErrors` is null when there's no error
+  if we return an empty object the `*ngIf` condition would be considered valid
+  -->
+ @if (form.formGroupErrors; as errors) {
+ <pre data-errors>{{ errors | json }}</pre>
+ } @else {
+ <span data-no-error>Form is valid, no error!</span>
+ }
  </mat-card-content>
 </mat-card>