upgrade to Angular 22

ui/src/app/app.config.ts

@@ -1,6 +1,6 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, isDevMode, provideZoneChangeDetection } from '@angular/core';
 import { provideServiceWorker } from '@angular/service-worker';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -12,6 +12,6 @@ export const appConfig: ApplicationConfig = {
             // or after 30 seconds (whichever comes first).
             registrationStrategy: 'registerWhenStable:30000'
           }),
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(withXhr(), withInterceptorsFromDi()),
   ]
 };

ui/src/app/components/master-checkbox.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, viewChild, output, input } from "@angular/core";
+import { Component, ElementRef, viewChild, output, input, ChangeDetectionStrategy } from "@angular/core";
 import { Checkable } from "../interfaces";
 import { FormsModule } from "@angular/forms";
 
@@ -10,7 +10,10 @@ import { FormsModule } from "@angular/forms";
     <label class="form-check-label visually-hidden" for="{{id()}}-select-all">Select all</label>
   </div>
 `,
-imports: [
+    // Shared Checkable objects are mutated in place; Eager preserves pre-v22 behavior.
+    // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [
   FormsModule
 ]
 })

ui/src/app/components/slave-checkbox.component.ts

@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { Component, input, ChangeDetectionStrategy } from '@angular/core';
 import { SelectAllCheckboxComponent } from './master-checkbox.component';
 import { Checkable } from '../interfaces';
 import { FormsModule } from '@angular/forms';
@@ -11,7 +11,10 @@ import { FormsModule } from '@angular/forms';
     <label class="form-check-label visually-hidden" for="{{master().id()}}-{{id()}}-select">Select item</label>
   </div>
 `,
-imports: [  
+    // Shared Checkable objects are mutated in place; Eager preserves pre-v22 behavior.
+    // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [  
   FormsModule
 ]
 })