Upgrade to Angular 20

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/angular",
-  "version": "9.0.0-rc.1",
+  "version": "10.0.0-rc.1",
   "scripts": {
     "ng": "ng",
     "build": "ng build angular-formio",
@@ -35,41 +35,41 @@
     "node": ">=6.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.6",
-    "@angular/animations": "^19.0.5",
-    "@angular/cli": "^19.0.6",
-    "@angular/common": "^19.0.5",
-    "@angular/compiler": "^19.0.5",
-    "@angular/compiler-cli": "^19.0.5",
-    "@angular/core": "^19.0.5",
-    "@angular/forms": "^19.0.5",
-    "@angular/platform-browser": "^19.0.5",
-    "@angular/platform-browser-dynamic": "^19.0.5",
-    "@angular/router": "^19.0.5",
-    "@compodoc/compodoc": "1.1.25",
+    "@angular-devkit/build-angular": "^20.0.1",
+    "@angular/animations": "^20.0.1",
+    "@angular/cli": "^20.0.1",
+    "@angular/common": "^20.0.1",
+    "@angular/compiler": "^20.0.1",
+    "@angular/compiler-cli": "^20.0.1",
+    "@angular/core": "^20.0.1",
+    "@angular/forms": "^20.0.1",
+    "@angular/platform-browser": "^20.0.1",
+    "@angular/platform-browser-dynamic": "^20.0.1",
+    "@angular/router": "^20.0.1",
+    "@compodoc/compodoc": "1.1.26",
     "@formio/deprecated-types": "^0.1.0",
-    "@formio/js": "^5.2.0-rc.1",
-    "@types/jasmine": "^5.1.5",
+    "@formio/js": "^5.1.2",
+    "@types/jasmine": "^5.1.8",
     "@types/jasminewd2": "^2.0.13",
-    "@types/node": "^22.10.5",
-    "bootstrap": "5.3.3",
+    "@types/node": "^22.15.30",
+    "bootstrap": "5.3.6",
     "codelyzer": "^6.0.2",
-    "jasmine-core": "^5.5.0",
+    "jasmine-core": "^5.7.1",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^19.0.1",
-    "ngx-bootstrap": "^19.0.2",
+    "ng-packagr": "^20.0.0",
+    "ngx-bootstrap": "20.0.2",
     "protractor": "~7.0.0",
     "replace-in-file": "^8.3.0",
-    "rxjs": "^7.8.1",
+    "rxjs": "^7.8.2",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
     "tslint": "~6.1.0",
-    "typescript": "~5.6.3",
-    "zone.js": "^0.15.0"
+    "typescript": "~5.9.3",
+    "zone.js": "^0.15.1"
   }
 }

projects/angular-formio/auth/src/auth.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 @Component({
-    templateUrl: './auth.component.html',
-    imports: [RouterLinkActive, RouterLink, RouterOutlet]
+  templateUrl: './auth.component.html',
+  standalone: false
 })
 export class FormioAuthComponent {}

projects/angular-formio/auth/src/auth.module.ts

@@ -11,15 +11,17 @@ import { FormioAuthRoutes } from './auth.routes';
 import { extendRouter } from '@formio/angular';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormioModule,
-        RouterModule,
-        FormioAuthComponent,
-        FormioAuthLoginComponent,
-        FormioAuthRegisterComponent,
-        FormioResetPassComponent
-    ]
+  imports: [
+    CommonModule,
+    FormioModule,
+    RouterModule
+  ],
+  declarations: [
+    FormioAuthComponent,
+    FormioAuthLoginComponent,
+    FormioAuthRegisterComponent,
+    FormioResetPassComponent
+  ]
 })
 export class FormioAuth {
   static forRoot(config?: FormioAuthRouteConfig): any {

projects/angular-formio/auth/src/login/login.component.ts

@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
 import { FormioAuthService } from '../auth.service';
-import { FormioComponent } from '@formio/angular';
 @Component({
-    templateUrl: './login.component.html',
-    imports: [FormioComponent]
+  templateUrl: './login.component.html',
+  standalone: false
 })
 export class FormioAuthLoginComponent {
   public renderOptions: any = {

projects/angular-formio/auth/src/register/register.component.ts

@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
 import { FormioAuthService } from '../auth.service';
-import { FormioComponent } from '@formio/angular';
 @Component({
-    templateUrl: './register.component.html',
-    imports: [FormioComponent]
+  templateUrl: './register.component.html',
+  standalone: false
 })
 export class FormioAuthRegisterComponent {
   public renderOptions: any = {

projects/angular-formio/auth/src/resetpass/resetpass.component.ts

@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
 import { FormioAuthService } from '../auth.service';
-import { FormioComponent } from '@formio/angular';
 @Component({
-    templateUrl: './resetpass.component.html',
-    imports: [FormioComponent]
+  templateUrl: './resetpass.component.html',
+  standalone: false
 })
 export class FormioResetPassComponent {
   constructor(public service: FormioAuthService) {}

projects/angular-formio/embed/src/builder.component.ts

@@ -1,12 +1,13 @@
-import {Component, ElementRef, Input, ViewChild, Output, EventEmitter, AfterViewInit, OnDestroy} from '@angular/core';
+import { Component, ElementRef, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core';
 import {Form, FormBuilder, Webform} from '@formio/js';
 import WebformBuilder from '@formio/js/lib/cjs/WebformBuilder';
 
 @Component({
     selector: 'formio-builder',
-    template: '<div #formio></div>'
+    template: '<div #formio></div>',
+    standalone: false
 })
-export class FormioBuilder implements AfterViewInit, OnDestroy {
+export class FormioBuilder implements AfterViewInit {
     @ViewChild('formio') element: ElementRef;
     @Input() form?: Form['options'] | null;
     @Input() options?: FormBuilder['options'] = {};
@@ -65,8 +66,4 @@ export class FormioBuilder implements AfterViewInit, OnDestroy {
             this.ready.emit(this.instance);
         }).catch((err) => this.error.emit(err));
     }
-
-  ngOnDestroy(): void {
-      this.instance.destroy(true);
-  }
 }

projects/angular-formio/embed/src/embed.module.ts

@@ -1,12 +1,14 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { FormioComponent } from "./formio.component";
-import { FormioBuilder } from "./builder.component";
-import { FormioAppService } from "./app.service";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormioComponent } from './formio.component';
+import { FormioBuilder } from './builder.component';
+import { FormioAppService } from './app.service';
 
 @NgModule({
     imports: [
-        CommonModule,
+        CommonModule
+    ],
+    declarations: [
         FormioComponent,
         FormioBuilder
     ],
@@ -18,4 +20,4 @@ import { FormioAppService } from "./app.service";
         FormioAppService
     ]
 })
-export class FormioEmbedModule {}
+export class FormioEmbedModule {}

projects/angular-formio/embed/src/formio.component.ts

@@ -4,7 +4,8 @@ import { Form as formType, Submission } from '@formio/core/types';
 
 @Component({
     selector: 'formio',
-    template: '<div #formio></div>'
+    template: '<div #formio></div>',
+    standalone: false
 })
 export class FormioComponent implements AfterViewInit {
     @Input() src?: string;

projects/angular-formio/grid/src/GridBodyComponent.ts

@@ -4,7 +4,10 @@ import { GridHeaderComponent } from './GridHeaderComponent';
 import { GridService } from './grid.service';
 import {FormioPromiseService} from '@formio/angular';
 
-@Component({ template: '' })
+@Component({
+  template: '',
+  standalone: false
+})
 export class GridBodyComponent {
   @Input() header: GridHeaderComponent;
   @Input() actionAllowed: any;

projects/angular-formio/grid/src/GridFooterComponent.ts

@@ -3,7 +3,10 @@ import { Input, Output, ViewChild, TemplateRef, EventEmitter, Component } from '
 import { GridHeaderComponent } from './GridHeaderComponent';
 import { GridBodyComponent } from './GridBodyComponent';
 
-@Component({ template: '' })
+@Component({
+  template: '',
+  standalone: false
+})
 export class GridFooterComponent {
   @Input() header: GridHeaderComponent;
   @Input() body: GridBodyComponent;

projects/angular-formio/grid/src/GridHeaderComponent.ts

@@ -2,7 +2,10 @@ import { Output, EventEmitter, ViewChild, TemplateRef, Input, Component } from '
 import {FormioPromiseService} from '@formio/angular';
 import {GridHeader} from './types/grid-header';
 
-@Component({ template: '' })
+@Component({
+  template: '',
+  standalone: false
+})
 export class GridHeaderComponent {
   @Input() actionAllowed: any;
   @Output() sort: EventEmitter<GridHeader>;

projects/angular-formio/grid/src/form/FormGridBody.component.ts

@@ -2,14 +2,11 @@ import { Component, ElementRef, OnDestroy, ViewChild, ViewChildren } from '@angu
 import { GridBodyComponent } from '../GridBodyComponent';
 import { FormioPromiseService } from '@formio/angular';
 import { Tooltip } from 'bootstrap';
-import { NgIf, NgFor } from '@angular/common';
-import { RouterLink } from '@angular/router';
-import { TimeSince } from './time-since.pipe';
 @Component({
-    selector: 'form-grid-body',
-    styleUrls: ['./FormGridBody.component.scss'],
-    templateUrl: './FormGridBody.component.html',
-    imports: [NgIf, NgFor, RouterLink, TimeSince]
+  selector: 'form-grid-body',
+  styleUrls: ['./FormGridBody.component.scss'],
+  templateUrl: './FormGridBody.component.html',
+  standalone: false
 })
 export class FormGridBodyComponent extends GridBodyComponent implements OnDestroy {
   @ViewChildren('create') createBtns: ElementRef[];

projects/angular-formio/grid/src/form/FormGridFooter.component.ts

@@ -1,14 +1,11 @@
 import {Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { GridFooterComponent } from '../GridFooterComponent';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { PaginationComponent } from 'ngx-bootstrap/pagination';
-import { FormsModule } from '@angular/forms';
 
 @Component({
-    templateUrl: './FormGridFooter.component.html',
-    styleUrls: ['../grid.footer.scss'],
-    encapsulation: ViewEncapsulation.None,
-    imports: [NgIf, NgTemplateOutlet, PaginationComponent, FormsModule]
+  templateUrl: './FormGridFooter.component.html',
+  styleUrls: ['../grid.footer.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class FormGridFooterComponent extends GridFooterComponent implements OnInit {
 

projects/angular-formio/grid/src/form/FormGridHeader.component.ts

@@ -1,12 +1,11 @@
 import {Component} from '@angular/core';
 import {GridHeaderComponent} from '../GridHeaderComponent';
 import {GridHeader, SortType} from '../types/grid-header';
-import { NgIf, NgClass } from '@angular/common';
 
 @Component({
-    selector: 'form-grid-header',
-    templateUrl: './FormGridHeader.component.html',
-    imports: [NgIf, NgClass]
+  selector: 'form-grid-header',
+  templateUrl: './FormGridHeader.component.html',
+  standalone: false
 })
 export class FormGridHeaderComponent extends GridHeaderComponent {
   public header: GridHeader;

projects/angular-formio/grid/src/form/time-since.pipe.ts

@@ -1,6 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({ name: 'timeSince' })
+@Pipe({
+  name: 'timeSince',
+  standalone: false
+})
 export class TimeSince implements PipeTransform {
   transform(date: Date): string {
     const elapsed = (new Date().getTime() - new Date(date).getTime()) / 1000;

projects/angular-formio/grid/src/grid.component.ts

@@ -23,15 +23,12 @@ import SubmissionComponents from './submission/index';
 import {FormioPromiseService} from '@formio/angular';
 import {GridColumn} from './types/grid-column';
 import {GridHeader, SortType} from './types/grid-header';
-import { FormioAlertsComponent } from '@formio/angular';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { FormioLoaderComponent } from '@formio/angular';
 
 @Component({
-    selector: 'formio-grid',
-    styleUrls: ['./grid.component.scss'],
-    templateUrl: './grid.component.html',
-    imports: [FormioAlertsComponent, NgIf, NgTemplateOutlet, FormioLoaderComponent]
+  selector: 'formio-grid',
+  styleUrls: ['./grid.component.scss'],
+  templateUrl: './grid.component.html',
+  standalone: false
 })
 export class FormioGridComponent implements OnChanges, OnInit, AfterViewInit {
   @Input() footerPosition = GridFooterPositions.bottom;

projects/angular-formio/grid/src/grid.module.ts

@@ -23,7 +23,9 @@ import { TimeSince } from './form/time-since.pipe'
         FormsModule,
         FormioModule,
         RouterModule,
-        PaginationModule.forRoot(),
+        PaginationModule.forRoot()
+    ],
+    declarations: [
         FormioGridComponent,
         FormGridHeaderComponent,
         FormGridBodyComponent,

projects/angular-formio/grid/src/submission/SubmissionGridBody.component.ts

@@ -4,10 +4,9 @@ import { GridBodyComponent } from '../GridBodyComponent';
 import {FormioPromiseService} from '@formio/angular';
 import { GridHeader } from '../types/grid-header';
 import {FormioSubmission} from '@formio/angular';
-import { NgFor } from '@angular/common';
 @Component({
-    templateUrl: './SubmissionGridBody.component.html',
-    imports: [NgFor]
+  templateUrl: './SubmissionGridBody.component.html',
+  standalone: false
 })
 export class SubmissionGridBodyComponent extends GridBodyComponent {
   load(formio: FormioPromiseService, query?: any) {

projects/angular-formio/grid/src/submission/SubmissionGridFooter.component.ts

@@ -1,14 +1,11 @@
 import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 import { GridFooterComponent } from '../GridFooterComponent';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { PaginationComponent } from 'ngx-bootstrap/pagination';
-import { FormsModule } from '@angular/forms';
 
 @Component({
-    templateUrl: './SubmissionGridFooter.component.html',
-    styleUrls: ['../grid.footer.scss'],
-    encapsulation: ViewEncapsulation.None,
-    imports: [NgIf, NgTemplateOutlet, PaginationComponent, FormsModule]
+  templateUrl: './SubmissionGridFooter.component.html',
+  styleUrls: ['../grid.footer.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class SubmissionGridFooterComponent extends GridFooterComponent implements OnInit {