Removed Recipe Template as it was not needed.

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

overlord/src/app/closing-stock/closing-stock.component.ts

@@ -1,5 +1,5 @@
 import { CurrencyPipe, DecimalPipe } from '@angular/common';
-import { Component, HostListener, inject, computed, input, linkedSignal, signal, afterNextRender } from '@angular/core';
+import { Component, inject, computed, input, linkedSignal, signal, afterNextRender } from '@angular/core';
 import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
@@ -29,7 +29,7 @@ import { ClosingStockItem } from './closing-stock-item';
 import { ClosingStockService } from './closing-stock.service';
 
 export interface ClosingStockFormData {
-  date: moment.Moment;
+  date: Date;
   costCentre: CostCentre | null;
   stocks: { physical: number; costCentre: string | undefined }[];
 }
@@ -38,6 +38,9 @@ export interface ClosingStockFormData {
   selector: 'app-closing-stock',
   templateUrl: './closing-stock.component.html',
   styleUrls: ['./closing-stock.component.css'],
+  host: {
+    '(window:keydown.f2)': 'focusDate($event)',
+  },
   imports: [
     MatIconModule,
     FormField,
@@ -83,7 +86,7 @@ export class ClosingStockComponent {
   model = linkedSignal({
     source: computed(() => ({ info: this.info(), costCentres: this.costCentres() })),
     computation: ({ info, costCentres }): ClosingStockFormData => ({
-      date: moment(info.date, 'DD-MMM-YYYY'),
+      date: moment(info.date, 'DD-MMM-YYYY').toDate(),
       costCentre: costCentres.find((c) => c.id === info.costCentre?.id) || null,
       stocks: info.items.map((x) => ({
         physical: x.physical,
@@ -130,7 +133,6 @@ export class ClosingStockComponent {
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['product', 'group', 'quantity', 'physical', 'variance', 'department', 'amount'];
 
-  @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
     this.form().focusBoundControl();
@@ -165,7 +167,7 @@ export class ClosingStockComponent {
   getClosingStock(): ClosingStock {
     const formModel = this.model();
     const currentInfo = this.info();
-    currentInfo.date = formModel.date.format('DD-MMM-YYYY');
+    currentInfo.date = moment(formModel.date).format('DD-MMM-YYYY');
     const array = formModel.stocks;
     currentInfo.items.forEach((item, index) => {
       item.physical = array[index].physical ?? 0;
@@ -178,7 +180,7 @@ export class ClosingStockComponent {
     const formModel = this.model();
 
     return new ClosingStock({
-      date: formModel.date.format('DD-MMM-YYYY'),
+      date: moment(formModel.date).format('DD-MMM-YYYY'),
       costCentre: new CostCentre({ id: formModel.costCentre?.id ?? '' }),
     });
   }