Removed Recipe Template as it was not needed.

Moved host listeners to the component declaration.
Form submit on Return fixed.

overlord/src/app/balance-sheet/balance-sheet.component.html

@@ -1,6 +1,6 @@
 <h2>Balance Sheet</h2>
 
-<form class="flex-col" [formRoot]="form">
+<form class="flex-col" [formRoot]="form" (submit)="$event.preventDefault(); show()">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Date</mat-label>
@@ -8,7 +8,7 @@
       <mat-datepicker-toggle matSuffix [for]="dateInput"></mat-datepicker-toggle>
       <mat-datepicker #dateInput></mat-datepicker>
     </mat-form-field>
-    <button mat-raised-button color="primary" (click)="show()">Show</button>
+    <button mat-raised-button type="submit" color="primary">Show</button>
   </div>
 </form>
 @if (infoResource.isLoading()) {

overlord/src/app/balance-sheet/balance-sheet.component.ts

@@ -1,8 +1,8 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, HostListener, inject, input, computed, linkedSignal, signal, afterNextRender } from '@angular/core';
+import { Component, inject, input, computed, linkedSignal, signal, afterNextRender } from '@angular/core';
 import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 export interface BalanceSheetFormData {
-  date: moment.Moment;
+  date: Date;
 }
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -24,6 +24,9 @@ import { BalanceSheetService } from './balance-sheet.service';
   selector: 'app-balance-sheet',
   templateUrl: './balance-sheet.component.html',
   styleUrls: ['./balance-sheet.component.css'],
+  host: {
+    '(window:keydown.f2)': 'focusDate($event)',
+  },
   imports: [
     FormField,
     FormRoot,
@@ -56,7 +59,7 @@ export class BalanceSheetComponent {
   formModel = linkedSignal<import('./balance-sheet').BalanceSheet, BalanceSheetFormData>({
     source: this.info,
     computation: (info: BalanceSheet): BalanceSheetFormData => ({
-      date: info.date ? moment(info.date, 'DD-MMM-YYYY') : moment(new Date()),
+      date: info.date ? moment(info.date, 'DD-MMM-YYYY').toDate() : new Date(),
     }),
   });
 
@@ -103,7 +106,6 @@ export class BalanceSheetComponent {
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['group', 'name', 'subAmount', 'total'];
 
-  @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
     this.form().focusBoundControl();