Chorehancement: update to Angular v22, 'zoneless' / 'reactive' (#13114)

src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.html

@@ -1,11 +1,11 @@
 <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <h4 class="modal-title" id="modal-basic-title">{{title()}}</h4>
     <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
 </div>
 <div class="modal-body">
     <table class="table">
         <tbody>
-            @for (key of hotkeys.entries(); track key[0]) {
+            @for (key of hotkeys().entries(); track key[0]) {
                 <tr>
                   <td>{{ key[1] }}</td>
                   <td class="d-flex justify-content-end">

src-ui/src/app/components/common/hotkey-dialog/hotkey-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core'
+import { Component, inject, signal } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 
 const SYMBOLS = {
@@ -20,9 +20,8 @@ const SYMBOLS = {
 })
 export class HotkeyDialogComponent {
   activeModal = inject(NgbActiveModal)
-
-  public title: string = $localize`Keyboard shortcuts`
-  public hotkeys: Map<string, string> = new Map()
+  readonly title = signal($localize`Keyboard shortcuts`)
+  readonly hotkeys = signal<Map<string, string>>(new Map())
 
   public close(): void {
     this.activeModal.close()