angular: Migrate to standalone components

Starting with Angular 19, standalone components are the new default and
non-standalone components are discouraged producing a lint error.

This migrates all components of the Angular and Angular Material packages
to be standalone. Backwards compatibility is maintained by keeping existing
NG modules which now import and export all components.
Thus, users can use the modules as before.

Author: lucas-koehler

packages/angular-material/.eslintrc.js

@@ -22,8 +22,6 @@ module.exports = {
     '@angular-eslint/component-class-suffix': 'off',
     '@angular-eslint/directive-class-suffix': 'off',
     '@angular-eslint/no-conflicting-lifecycle': 'warn',
-    // Starting with Angular 19, non-standalone components produce a lint error. Reduce to warning until we migrate.
-    '@angular-eslint/prefer-standalone': 'warn',
     '@typescript-eslint/no-explicit-any': 'off',
     // Base rule must be disabled to avoid incorrect errors
     'no-unused-vars': 'off',

packages/angular-material/example/app/app.component.ts

@@ -23,6 +23,8 @@
   THE SOFTWARE.
 */
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JsonFormsModule } from '@jsonforms/angular';
 import { ExampleDescription, getExamples } from '@jsonforms/examples';
 import {
   JsonFormsI18nState,
@@ -87,7 +89,7 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
       [readonly]="readonly"
     ></jsonforms>
   `,
-  standalone: false,
+  imports: [CommonModule, JsonFormsModule],
 })
 export class AppComponent {
   readonly renderers = angularMaterialRenderers;

packages/angular-material/example/app/app.module.ts

@@ -29,11 +29,11 @@ import { AppComponent } from './app.component';
 import { JsonFormsAngularMaterialModule } from '../../src/library';
 
 @NgModule({
-  declarations: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     JsonFormsAngularMaterialModule,
+    AppComponent,
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

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

@@ -41,6 +41,11 @@ import {
 } from '@jsonforms/core';
 import type { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 
 /**
  * To use this component you will need to add your own tester:
@@ -110,7 +115,13 @@ import { map, startWith } from 'rxjs/operators';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatAutocompleteModule,
+  ],
 })
 export class AutocompleteControlRenderer
   extends JsonFormsControl

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

@@ -30,6 +30,9 @@ import {
 } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
+import { CommonModule } from '@angular/common';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 @Component({
   selector: 'BooleanControlRenderer',
@@ -65,7 +68,7 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [CommonModule, MatCheckboxModule, MatFormFieldModule],
 })
 export class BooleanControlRenderer extends JsonFormsControl {
   constructor(

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

@@ -40,7 +40,14 @@ import { JsonFormsAngularService, 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';
-import { MatDatepicker } from '@angular/material/datepicker';
+import {
+  MatDatepicker,
+  MatDatepickerModule,
+} from '@angular/material/datepicker';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'DateControlRenderer',
@@ -105,7 +112,13 @@ import { MatDatepicker } from '@angular/material/datepicker';
       useClass: MyFormat,
     },
   ],
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+  ],
 })
 export class DateControlRenderer extends JsonFormsControl {
   focused = false;

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

@@ -33,6 +33,10 @@ import {
   StatePropsOfControl,
 } from '@jsonforms/core';
 import merge from 'lodash/merge';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'NumberControlRenderer',
@@ -69,7 +73,12 @@ import merge from 'lodash/merge';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ],
 })
 export class NumberControlRenderer extends JsonFormsControl {
   private readonly MAXIMUM_FRACTIONAL_DIGITS = 20;

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

@@ -29,6 +29,9 @@ import {
 } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
+import { CommonModule } from '@angular/common';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 @Component({
   selector: 'RangeControlRenderer',
@@ -69,7 +72,7 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [CommonModule, MatSliderModule, MatFormFieldModule],
 })
 export class RangeControlRenderer extends JsonFormsControl {
   min: number;

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

@@ -25,6 +25,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'TextControlRenderer',
@@ -58,7 +62,12 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ],
 })
 export class TextControlRenderer extends JsonFormsControl {
   focused = false;

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

@@ -25,6 +25,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'TextAreaRenderer',
@@ -57,7 +61,12 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ],
 })
 export class TextAreaRenderer extends JsonFormsControl {
   focused = false;