Removed Recipe Template as it was not needed.

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

overlord/src/app/purchases/purchases.component.html

@@ -1,6 +1,6 @@
 <h2>Purchases</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 basis-2-5">
       <mat-label>Start Date</mat-label>
@@ -14,7 +14,7 @@
       <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
       <mat-datepicker #finishDate></mat-datepicker>
     </mat-form-field>
-    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+    <button mat-raised-button type="submit" class="flex-auto basis-1-5" color="primary">Show</button>
   </div>
 </form>
 @if (resource.isLoading()) {

overlord/src/app/purchases/purchases.component.ts

@@ -1,5 +1,5 @@
 import { CurrencyPipe, DecimalPipe } from '@angular/common';
-import { Component, HostListener, inject, linkedSignal, computed, signal, input } from '@angular/core';
+import { Component, inject, linkedSignal, computed, signal, input } from '@angular/core';
 import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -18,14 +18,17 @@ import { PurchasesItem } from './purchases-item';
 import { PurchasesService } from './purchases.service';
 
 export interface PurchasesFormData {
-  startDate: moment.Moment | null | string;
-  finishDate: moment.Moment | null | string;
+  startDate: Date;
+  finishDate: Date;
 }
 
 @Component({
   selector: 'app-purchases',
   templateUrl: './purchases.component.html',
   styleUrls: ['./purchases.component.css'],
+  host: {
+    '(window:keydown.f2)': 'focusDate($event)',
+  },
 
   imports: [
     FormField,
@@ -93,10 +96,10 @@ export class PurchasesComponent {
   });
 
   formModel = linkedSignal({
-    source: () => null,
-    computation: (): PurchasesFormData => ({
-      startDate: moment(new Date()),
-      finishDate: moment(new Date()),
+    source: () => this.info(),
+    computation: (info: Purchases): PurchasesFormData => ({
+      startDate: info.startDate ? moment(info.startDate, 'DD-MMM-YYYY').toDate() : new Date(),
+      finishDate: info.finishDate ? moment(info.finishDate, 'DD-MMM-YYYY').toDate() : new Date(),
     }),
   });
 
@@ -106,7 +109,6 @@ export class PurchasesComponent {
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['product', 'quantity', 'rate', 'amount'];
 
-  @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
     this.form().focusBoundControl();