Removed Recipe Template as it was not needed.

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

overlord/src/app/period/period-detail/period-detail.component.ts

@@ -1,7 +1,7 @@
-import { Component, HostListener, inject, linkedSignal, input, computed } from '@angular/core';
+import { Component, inject, linkedSignal, input, computed } from '@angular/core';
 export interface PeriodFormData {
-  validFrom: moment.Moment;
-  validTill: moment.Moment;
+  validFrom: Date;
+  validTill: Date;
 }
 import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
@@ -23,6 +23,9 @@ import { PeriodService } from '../period.service';
   selector: 'app-period-detail',
   templateUrl: './period-detail.component.html',
   styleUrls: ['./period-detail.component.css'],
+  host: {
+    '(window:keydown.f2)': 'focusDate($event)',
+  },
   imports: [
     FormField,
     FormRoot,
@@ -49,14 +52,13 @@ export class PeriodDetailComponent {
   model = linkedSignal({
     source: this.item,
     computation: (item): PeriodFormData => ({
-      validFrom: item.validFrom ? moment(item.validFrom, 'DD-MMM-YYYY') : moment(new Date()),
-      validTill: item.validTill ? moment(item.validTill, 'DD-MMM-YYYY') : moment(new Date()),
+      validFrom: item.validFrom ? moment(item.validFrom, 'DD-MMM-YYYY').toDate() : new Date(),
+      validTill: item.validTill ? moment(item.validTill, 'DD-MMM-YYYY').toDate() : new Date(),
     }),
   });
 
   form = createForm(this.model);
 
-  @HostListener('window:keydown.f2', ['$event'])
   focusDate(event: Event) {
     event.preventDefault();
     this.form().focusBoundControl();