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/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",
+    "@angular/animations": "^21.2.1",
+    "@angular/common": "^21.2.1",
+    "@angular/compiler": "^21.2.1",
+    "@angular/core": "^21.2.1",
+    "@angular/forms": "^21.2.1",
+    "@angular/platform-browser": "^21.2.1",
+    "@angular/platform-browser-dynamic": "^21.2.1",
+    "@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/cli": "^21.0.3",
-    "@angular/compiler-cli": "^21.0.5",
+    "@angular/build": "^21.2.1",
+    "@angular/cli": "^21.2.1",
+    "@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,25 +67,34 @@ import { Field, form } from '@angular/forms/signals';
       </p-accordion-panel>
     </p-accordion>
     <p-dialog [(visible)]="editDialogVisible" header="Edit Column">
+      <div class="flex flex-col gap-2">
         <p-float-label variant="in">
-        <input pInputText id="column-edit-name" [field]="editingColumn.name" />
+          <input
+            pInputText
+            id="column-edit-name"
+            [formField]="editingColumn.name"
+          />
           <label for="column-edit-name">Name</label>
         </p-float-label>
         <p-float-label variant="in">
           <p-select
+            fluid
             inputId="column-edit-type"
-          [field]="editingColumn.type"
+            [formField]="$any(editingColumn.type)"
+            [options]="columnTypes"
+            appendTo="body"
           ></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"
+            [formField]="editingColumn.enabled"
             [binary]="true"
             inputId="column-edit-enabled"
           ></p-check-box>
           <label for="column-edit-enabled">Enabled</label>
         </div>
+      </div>
     </p-dialog>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -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) => {