angular: build against v20, allow v22 RC, inject() instead of constructor injection

MIGRATION.md

@@ -40,6 +40,45 @@ return this.t(label, label) as string;
 
 This does not affect the Composition API where `Translator` is accessed directly from a `ComputedRef`.
 
+### Angular support now targets Angular 20 to 22
+
+When using JSON Forms 3.8, your Angular application now needs to target Angular 20, 21 or 22.
+
+Use JSON Forms 3.7 if you need to stay on Angular 19.
+
+### Angular renderers use `inject()` instead of constructor injection
+
+All Angular base classes (`JsonFormsAbstractControl`, `LayoutRenderer`, `JsonFormsOutlet`, `JsonForms`) now use Angular's `inject()` function instead of constructor parameter injection.
+
+The `JsonFormsAngularService` is now provided as a `protected` field on `JsonFormsAbstractControl`, so custom control renderers can use `this.jsonFormsService` directly without injecting it themselves.
+
+**Before:**
+
+```ts
+@Component({ ... })
+export class MyCustomRenderer extends JsonFormsControl {
+  constructor(
+    private myService: MyService,
+    jsonFormsService: JsonFormsAngularService
+  ) {
+    super(jsonFormsService);
+  }
+}
+```
+
+**After:**
+
+```ts
+@Component({ ... })
+export class MyCustomRenderer extends JsonFormsControl {
+  private myService = inject(MyService);
+}
+```
+
+If your custom renderer extends `LayoutRenderer`, the same applies.
+Remove the constructor parameters for `JsonFormsAngularService` and `ChangeDetectorRef`, as both are now injected by the base class.
+The `ChangeDetectorRef` is available as a `protected` field `this.changeDetectionRef` on `LayoutRenderer`.
+
 ### Angular material removes hammerjs
 
 The angular material package no longer depends or imports the `hammerjs` package.

package.json

@@ -43,7 +43,7 @@
     "ts-loader": "^9.5.1",
     "ts-node": "^10.4.0",
     "tslib": "^2.5.0",
-    "typescript": "~5.5.0",
+    "typescript": "~5.8.3",
     "webpack": "^5.78.0",
     "webpack-merge": "^5.10.0"
   }

packages/angular-material/package.json

@@ -64,14 +64,14 @@
     ]
   },
   "peerDependencies": {
-    "@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/material": "^19.0.0 || ^20.0.0 || ^21.0.0",
-    "@angular/platform-browser": "^19.0.0 || ^20.0.0 || ^21.0.0",
-    "@angular/router": "^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/animations": "^20.0.0 || ^21.0.0 || ^22.0.0-rc.0",
+    "@angular/cdk": "^20.0.0 || ^21.0.0 || ^22.0.0-rc.0",
+    "@angular/common": "^20.0.0 || ^21.0.0 || ^22.0.0-rc.0",
+    "@angular/core": "^20.0.0 || ^21.0.0 || ^22.0.0-rc.0",
+    "@angular/forms": "^20.0.0 || ^21.0.0 || ^22.0.0-rc.0",
+    "@angular/material": "^20.0.0 || ^21.0.0 || ^22.0.0-rc.0",
+    "@angular/platform-browser": "^20.0.0 || ^21.0.0 || ^22.0.0-rc.0",
+    "@angular/router": "^20.0.0 || ^21.0.0 || ^22.0.0-rc.0",
     "@jsonforms/angular": "3.8.0-alpha.1",
     "@jsonforms/core": "3.8.0-alpha.1",
     "dayjs": "^1.11.10",
@@ -81,30 +81,30 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.0",
-    "@angular-devkit/core": "^19.0.0",
-    "@angular-eslint/eslint-plugin": "^19.0.0",
-    "@angular-eslint/eslint-plugin-template": "^19.0.0",
-    "@angular-eslint/schematics": "^19.0.0",
-    "@angular-eslint/template-parser": "^19.0.0",
-    "@angular/animations": "^19.0.0",
-    "@angular/cdk": "^19.0.0",
-    "@angular/cli": "^19.0.0",
-    "@angular/common": "^19.0.0",
-    "@angular/compiler": "^19.0.0",
-    "@angular/compiler-cli": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/forms": "^19.0.0",
-    "@angular/material": "^19.0.0",
-    "@angular/platform-browser": "^19.0.0",
-    "@angular/platform-browser-dynamic": "^19.0.0",
-    "@angular/router": "^19.0.0",
+    "@angular-devkit/build-angular": "^20.0.0",
+    "@angular-devkit/core": "^20.0.0",
+    "@angular-eslint/eslint-plugin": "^20.0.0",
+    "@angular-eslint/eslint-plugin-template": "^20.0.0",
+    "@angular-eslint/schematics": "^20.0.0",
+    "@angular-eslint/template-parser": "^20.0.0",
+    "@angular/animations": "^20.0.0",
+    "@angular/cdk": "^20.0.0",
+    "@angular/cli": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/material": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@angular/router": "^20.0.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@jsonforms/angular": "workspace:*",
     "@jsonforms/core": "workspace:*",
     "@jsonforms/examples": "workspace:*",
-    "@ngtools/webpack": "^19.0.0",
+    "@ngtools/webpack": "^20.0.0",
     "@types/jasmine": "~3.8.0",
     "@types/lodash": "4.14.149",
     "@types/node": "^24.12.2",
@@ -128,7 +128,7 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
-    "ng-packagr": "^19.0.0",
+    "ng-packagr": "^20.0.0",
     "null-loader": "^0.1.1",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",
@@ -138,7 +138,7 @@
     "ts-loader": "^9.5.1",
     "tslib": "^2.5.0",
     "typedoc": "~0.25.3",
-    "typescript": "~5.5.0",
+    "typescript": "~5.8.3",
     "webpack": "^5.78.0",
     "yargs": "^17.7.2",
     "zone.js": "~0.15.0"

packages/angular-material/src/library/controls/boolean.renderer.ts

@@ -26,9 +26,10 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  inject,
   ViewRef,
 } from '@angular/core';
-import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
+import { JsonFormsControl } from '@jsonforms/angular';
 import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
 import { CommonModule } from '@angular/common';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -71,12 +72,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
   imports: [CommonModule, MatCheckboxModule, MatFormFieldModule],
 })
 export class BooleanControlRenderer extends JsonFormsControl {
-  constructor(
-    jsonformsService: JsonFormsAngularService,
-    private changeDetectionRef: ChangeDetectorRef
-  ) {
-    super(jsonformsService);
-  }
+  private changeDetectionRef = inject(ChangeDetectorRef);
   isChecked = () => this.data || false;
   getEventValue = (event: any) => event.checked;
 

packages/angular-material/src/library/controls/date.renderer.ts

@@ -25,7 +25,7 @@
 import {
   Component,
   ChangeDetectionStrategy,
-  Inject,
+  inject,
   ViewEncapsulation,
 } from '@angular/core';
 import {
@@ -36,7 +36,7 @@ import {
   rankWith,
   StatePropsOfControl,
 } from '@jsonforms/core';
-import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
+import { JsonFormsControl } from '@jsonforms/angular';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { MyFormat } from '../util/date-format';
 import { DayJsDateAdapter } from '../util/dayjs-date-adapter';
@@ -126,13 +126,8 @@ export class DateControlRenderer extends JsonFormsControl {
   startView = '';
   panelClass = '';
 
-  constructor(
-    jsonformsService: JsonFormsAngularService,
-    @Inject(MAT_DATE_FORMATS) private dateFormat: MyFormat,
-    @Inject(DateAdapter) private dateAdapter: DayJsDateAdapter
-  ) {
-    super(jsonformsService);
-  }
+  private dateFormat = inject<MyFormat>(MAT_DATE_FORMATS);
+  private dateAdapter = inject(DateAdapter) as DayJsDateAdapter;
 
   getEventValue = (event: any) => {
     const value = event.value ? event.value : event;

packages/angular-material/src/library/controls/enum.renderer.ts

@@ -29,7 +29,7 @@ import {
   OnInit,
 } from '@angular/core';
 import type { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
-import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
+import { JsonFormsControl } from '@jsonforms/angular';
 import {
   Actions,
   composeWithUi,
@@ -120,10 +120,6 @@ export class OneOfEnumControlRenderer
   shouldFilter: boolean;
   focused = false;
 
-  constructor(jsonformsService: JsonFormsAngularService) {
-    super(jsonformsService);
-  }
-
   protected override mapToProps(
     state: JsonFormsState
   ): StatePropsOfControl & OwnPropsOfEnum {

packages/angular-material/src/library/controls/number.renderer.ts

@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
+import { JsonFormsControl } from '@jsonforms/angular';
 import {
   isIntegerControl,
   isNumberControl,
@@ -92,10 +92,6 @@ export class NumberControlRenderer extends JsonFormsControl {
   decimalSeparator: string;
   focused = false;
 
-  constructor(jsonformsService: JsonFormsAngularService) {
-    super(jsonformsService);
-  }
-
   onChange(ev: any) {
     const data = this.oldValue
       ? ev.target.value.replace(this.oldValue, '')

packages/angular-material/src/library/controls/range.renderer.ts

@@ -24,10 +24,11 @@
 */
 import {
   ChangeDetectionStrategy,
-  Component,
   ChangeDetectorRef,
+  Component,
+  inject,
 } from '@angular/core';
-import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
+import { JsonFormsControl } from '@jsonforms/angular';
 import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
 import { CommonModule } from '@angular/common';
 import { MatSliderModule } from '@angular/material/slider';
@@ -80,12 +81,7 @@ export class RangeControlRenderer extends JsonFormsControl {
   multipleOf: number;
   focused = false;
 
-  constructor(
-    jsonformsService: JsonFormsAngularService,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {
-    super(jsonformsService);
-  }
+  private changeDetectorRef = inject(ChangeDetectorRef);
   getEventValue = (event: number) => Number(event);
   mapAdditionalProps() {
     if (this.scopedSchema) {

packages/angular-material/src/library/controls/text.renderer.ts

@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
+import { JsonFormsControl } from '@jsonforms/angular';
 import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -71,9 +71,6 @@ import { MatInputModule } from '@angular/material/input';
 })
 export class TextControlRenderer extends JsonFormsControl {
   focused = false;
-  constructor(jsonformsService: JsonFormsAngularService) {
-    super(jsonformsService);
-  }
   getEventValue = (event: any) => event.target.value || undefined;
   getType = (): string => {
     if (this.uischema.options && this.uischema.options.format) {

packages/angular-material/src/library/controls/textarea.renderer.ts

@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
+import { JsonFormsControl } from '@jsonforms/angular';
 import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -70,9 +70,6 @@ import { MatInputModule } from '@angular/material/input';
 })
 export class TextAreaRenderer extends JsonFormsControl {
   focused = false;
-  constructor(jsonformsService: JsonFormsAngularService) {
-    super(jsonformsService);
-  }
   getEventValue = (event: any) => event.target.value || undefined;
 }
 export const TextAreaRendererTester: RankedTester = rankWith(

packages/angular-material/src/library/controls/toggle.renderer.ts

@@ -24,10 +24,11 @@
 */
 import {
   ChangeDetectionStrategy,
-  Component,
   ChangeDetectorRef,
+  Component,
+  inject,
 } from '@angular/core';
-import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
+import { JsonFormsControl } from '@jsonforms/angular';
 import {
   and,
   isBooleanControl,
@@ -61,12 +62,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
   imports: [CommonModule, MatSlideToggleModule, MatFormFieldModule],
 })
 export class ToggleControlRenderer extends JsonFormsControl {
-  constructor(
-    jsonformsService: JsonFormsAngularService,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {
-    super(jsonformsService);
-  }
+  private changeDetectorRef = inject(ChangeDetectorRef);
   isChecked = () => this.data || false;
   getEventValue = (event: any) => event.checked;
   mapAdditionalProps() {

packages/angular-material/src/library/layouts/array-layout.renderer.ts

@@ -29,11 +29,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import {
-  JsonFormsAngularService,
-  JsonFormsAbstractControl,
-  JsonFormsModule,
-} from '@jsonforms/angular';
+import { JsonFormsAbstractControl, JsonFormsModule } from '@jsonforms/angular';
 import {
   arrayDefaultTranslations,
   ArrayLayoutProps,
@@ -192,9 +188,6 @@ export class ArrayLayoutRenderer
     tester: UISchemaTester;
     uischema: UISchemaElement;
   }[];
-  constructor(jsonFormsService: JsonFormsAngularService) {
-    super(jsonFormsService);
-  }
   mapToProps(
     state: JsonFormsState
   ): StatePropsOfArrayLayout & { translations: ArrayTranslations } {

packages/angular-material/src/library/layouts/categorization-layout.renderer.ts

@@ -39,7 +39,7 @@ import {
   rankWith,
   uiTypeIs,
 } from '@jsonforms/core';
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import {
   JsonFormsAngularService,
   JsonFormsBaseRenderer,
@@ -79,9 +79,7 @@ export class CategorizationTabLayoutRenderer
   visibleCategories: (Category | Categorization)[];
   categoryLabels: string[];
 
-  constructor(private jsonFormsService: JsonFormsAngularService) {
-    super();
-  }
+  private jsonFormsService = inject(JsonFormsAngularService);
 
   ngOnInit() {
     this.addSubscription(