angular: use inject() instead of constructor injection

Replace using constructor injection with using the inject function.
Constructor injections is discouraged by angular's lint rules starting with Angular 20.

Author: lucas-koehler

MIGRATION.md

@@ -46,6 +46,39 @@ When using JSON Forms 3.8, your Angular application now needs to target Angular
 
 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.

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 } {