Update to angular 21, switch to signal forms for column editor

package.json

@@ -10,31 +10,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.6",
-    "@angular/common": "^20.3.6",
-    "@angular/compiler": "^20.3.6",
-    "@angular/core": "^20.3.6",
-    "@angular/forms": "^20.3.6",
-    "@angular/platform-browser": "^20.3.6",
-    "@angular/platform-browser-dynamic": "^20.3.6",
-    "@angular/router": "^20.3.6",
+    "@angular/animations": "^21.0.5",
+    "@angular/common": "^21.0.5",
+    "@angular/compiler": "^21.0.5",
+    "@angular/core": "^21.0.5",
+    "@angular/forms": "^21.0.5",
+    "@angular/platform-browser": "^21.0.5",
+    "@angular/platform-browser-dynamic": "^21.0.5",
+    "@angular/router": "^21.0.5",
     "@duckdb/duckdb-wasm": "^1.30.0",
-    "@primeng/themes": "20.2.0",
+    "@primeng/themes": "^21.0.0",
     "@tailwindcss/postcss": "^4.1.15",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "primeicons": "^7.0.0",
-    "primeng": "20.2.0",
+    "primeng": "^21.0.0",
     "rxjs": "~7.8.2",
     "tailwindcss": "^4.1.15",
-    "tailwindcss-primeui": "0.6.1",
+    "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.8.1",
-    "zod": "4.1.12"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@angular/build": "^20.3.6",
-    "@angular/cli": "^20.3.6",
-    "@angular/compiler-cli": "^20.3.6",
+    "@angular/build": "^21.0.3",
+    "@angular/cli": "^21.0.3",
+    "@angular/compiler-cli": "^21.0.5",
     "@tauri-apps/cli": "^2.9.0",
     "@types/jasmine": "~5.1.12",
     "jasmine-core": "~5.12.0",
@@ -43,6 +43,7 @@
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "postcss": "^8.5.3",
     "typescript": "~5.9.3"
   }
 }

src/app/column-editor/column-editor.component.ts

@@ -14,6 +14,7 @@ import { Dialog } from 'primeng/dialog';
 import { FloatLabel } from 'primeng/floatlabel';
 import { InputText } from 'primeng/inputtext';
 import { Select } from 'primeng/select';
+import { Field, form } from '@angular/forms/signals';
 
 @Component({
   selector: 'app-column-editor',
@@ -28,6 +29,7 @@ import { Select } from 'primeng/select';
     FloatLabel,
     InputText,
     Select,
+    Field,
   ],
   template: `
     <p-accordion [value]="0">
@@ -65,29 +67,25 @@ import { Select } from 'primeng/select';
       </p-accordion-panel>
     </p-accordion>
     <p-dialog [(visible)]="editDialogVisible" header="Edit Column">
-      @let editingColumn = this.editingColumn();
-      @if (editingColumn) {
-        <p-float-label>
-          <input
-            pInputText
-            id="column-edit-name"
-            [(ngModel)]="editingColumn.name"
-          />
-          <label for="column-edit-name">Name</label>
-        </p-float-label>
-        <p-float-label>
-          <p-select inputId="column-edit-type"></p-select>
-          <label for="column-edit-type">Type</label>
-        </p-float-label>
-        <div class="flex items-center gap-2">
-          <p-check-box
-            [(ngModel)]="editingColumn.enabled"
-            [binary]="true"
-            inputId="column-edit-enabled"
-          ></p-check-box>
-          <label for="column-edit-enabled">Enabled</label>
-        </div>
-      }
+      <p-float-label variant="in">
+        <input pInputText id="column-edit-name" [field]="editingColumn.name" />
+        <label for="column-edit-name">Name</label>
+      </p-float-label>
+      <p-float-label variant="in">
+        <p-select
+          inputId="column-edit-type"
+          [field]="editingColumn.type"
+        ></p-select>
+        <label for="column-edit-type">Type</label>
+      </p-float-label>
+      <div class="flex items-center gap-2">
+        <p-check-box
+          [field]="editingColumn.enabled"
+          [binary]="true"
+          inputId="column-edit-enabled"
+        ></p-check-box>
+        <label for="column-edit-enabled">Enabled</label>
+      </div>
     </p-dialog>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -96,7 +94,14 @@ export class ColumnEditorComponent {
   columns = model<Column[]>();
 
   protected editDialogVisible = signal(false);
-  protected editingColumn = signal<Column | null>(null);
+
+  protected currentColumn = signal<Column>({
+    name: '',
+    enabled: true,
+    type: 'string',
+  });
+
+  protected editingColumn = form(this.currentColumn);
 
   protected checkboxChanged(index: number) {
     this.columns.update((columns) => {
@@ -115,7 +120,7 @@ export class ColumnEditorComponent {
   protected editColumn(index: number) {
     const columns = this.columns();
     if (columns) {
-      this.editingColumn.set(columns[index]);
+      this.currentColumn.set(columns[index]);
       this.editDialogVisible.set(true);
     }
   }