Update to angular 21

angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "bun"
+    "packageManager": "bun",
+    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {

package.json

@@ -10,14 +10,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.0.5",
+    "@angular/animations": "^21.2.1",
-    "@angular/common": "^21.0.5",
+    "@angular/common": "^21.2.1",
-    "@angular/compiler": "^21.0.5",
+    "@angular/compiler": "^21.2.1",
-    "@angular/core": "^21.0.5",
+    "@angular/core": "^21.2.1",
-    "@angular/forms": "^21.0.5",
+    "@angular/forms": "^21.2.1",
-    "@angular/platform-browser": "^21.0.5",
+    "@angular/platform-browser": "^21.2.1",
-    "@angular/platform-browser-dynamic": "^21.0.5",
+    "@angular/platform-browser-dynamic": "^21.2.1",
-    "@angular/router": "^21.0.5",
+    "@angular/router": "^21.2.1",
     "@duckdb/duckdb-wasm": "^1.30.0",
     "@primeng/themes": "^21.0.0",
     "@tailwindcss/postcss": "^4.1.15",
@@ -32,9 +32,9 @@
     "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@angular/build": "^21.0.3",
+    "@angular/build": "^21.2.1",
-    "@angular/cli": "^21.0.3",
+    "@angular/cli": "^21.2.1",
-    "@angular/compiler-cli": "^21.0.5",
+    "@angular/compiler-cli": "^21.2.1",
     "@tauri-apps/cli": "^2.9.0",
     "@types/jasmine": "~5.1.12",
     "jasmine-core": "~5.12.0",

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

@@ -14,7 +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';
+import { Field, form, FormField } from '@angular/forms/signals';
 
 @Component({
   selector: 'app-column-editor',
@@ -29,7 +29,7 @@ import { Field, form } from '@angular/forms/signals';
     FloatLabel,
     InputText,
     Select,
-    Field,
+    FormField,
   ],
   template: `
     <p-accordion [value]="0">
@@ -67,24 +67,33 @@ import { Field, form } from '@angular/forms/signals';
       </p-accordion-panel>
     </p-accordion>
     <p-dialog [(visible)]="editDialogVisible" header="Edit Column">
-      <p-float-label variant="in">
+      <div class="flex flex-col gap-2">
-        <input pInputText id="column-edit-name" [field]="editingColumn.name" />
+        <p-float-label variant="in">
-        <label for="column-edit-name">Name</label>
+          <input
-      </p-float-label>
+            pInputText
-      <p-float-label variant="in">
+            id="column-edit-name"
-        <p-select
+            [formField]="editingColumn.name"
-          inputId="column-edit-type"
+          />
-          [field]="editingColumn.type"
+          <label for="column-edit-name">Name</label>
-        ></p-select>
+        </p-float-label>
-        <label for="column-edit-type">Type</label>
+        <p-float-label variant="in">
-      </p-float-label>
+          <p-select
-      <div class="flex items-center gap-2">
+            fluid
-        <p-check-box
+            inputId="column-edit-type"
-          [field]="editingColumn.enabled"
+            [formField]="$any(editingColumn.type)"
-          [binary]="true"
+            [options]="columnTypes"
-          inputId="column-edit-enabled"
+            appendTo="body"
-        ></p-check-box>
+          ></p-select>
-        <label for="column-edit-enabled">Enabled</label>
+          <label for="column-edit-type">Type</label>
+        </p-float-label>
+        <div class="flex items-center gap-2">
+          <p-check-box
+            [formField]="editingColumn.enabled"
+            [binary]="true"
+            inputId="column-edit-enabled"
+          ></p-check-box>
+          <label for="column-edit-enabled">Enabled</label>
+        </div>
       </div>
     </p-dialog>
   `,
@@ -93,15 +102,17 @@ import { Field, form } from '@angular/forms/signals';
 export class ColumnEditorComponent {
   columns = model<Column[]>();
 
-  protected editDialogVisible = signal(false);
+  protected readonly editDialogVisible = signal(false);
 
-  protected currentColumn = signal<Column>({
+  protected readonly columnTypes = ['string', 'number', 'boolean'];
+
+  protected readonly currentColumn = signal<Column>({
     name: '',
     enabled: true,
     type: 'string',
   });
 
-  protected editingColumn = form(this.currentColumn);
+  protected readonly editingColumn = form(this.currentColumn);
 
   protected checkboxChanged(index: number) {
     this.columns.update((columns) => {