move template logic into Form

src/app/app.component.ts

@@ -1,44 +1,38 @@
 import { Component } from '@angular/core';
 
-import { forms } from "src/assets/forms";
+import { checkin, checkout } from "src/assets/forms";
 
 @Component({
   selector: 'app-root',
   template: `
-      <button *ngFor="let template of templates" 
-        (click)=change(template)
-      >
-      
-        {{ template.name }}
+      <div class="menu">
+          
+        <button (click)="switch('checkout')">Check Out</button>
+        <button (click)="switch('checkin')">Check In</button>
 
-      </button>
+      </div>
 
-      <app-form [form]="form"></app-form>
+      <app-form *ngIf="action=='checkin'" [template]="checkin"></app-form>
+
+      <app-form *ngIf="action=='checkout'" [template]="checkout"></app-form>
 
       <footer>Accenture | 2022</footer>
   `
 })
 export class AppComponent {
   
-  templates: Form[] = forms;
+  checkin: Form = checkin;
+  checkout: Form = checkout;
 
-  form: Form; /* Active */
+  action: string = "checkout";
 
-  ngOnInit() { this.set(this.templates[0]); } 
+  ngOnInit() { }
 
-  set(template: Form) {
-    
-    this.form = Object.assign({}, template);
-
-    console.log("Setting", this.form);
-
-  }
-
-  change(template: Form) {
+  switch(action: string) {
 
     alert("Are you sure?");
 
-    this.set(template);
+    this.action = action;
 
   }
 

src/app/app.module.ts

@@ -6,8 +6,6 @@ import { AppComponent } from './app.component';
 import { FormComponent } from './form.component';
 import { TextComponent } from './text.component';
 import { RadioComponent } from './radio.component';
-import { MenuComponent } from './menu.component';
-import { BarComponent } from './bar.component';
 import { StepComponent } from './step.component';
 
 @NgModule({
@@ -16,8 +14,6 @@ import { StepComponent } from './step.component';
     FormComponent,
     TextComponent,
     RadioComponent,
-    MenuComponent,
-    BarComponent,
     StepComponent,
   ],
   imports: [

src/app/bar.component.ts

@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-bar',
-  template: `
-    <p>
-      bar works!
-    </p>
-  `,
-  styles: [
-  ]
-})
-export class BarComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/form.component.ts

@@ -33,9 +33,13 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class FormComponent implements OnInit {
 
-  @Input() form: Form;
+  @Input() template: Form;
 
-  ngOnInit() { console.log("Form", this.form); }
+  form: Form;
+
+  ngOnInit() { this.set() }
+
+  set() { this.form = Object.assign({}, this.template); }
 
   next() {
 
@@ -47,7 +51,12 @@ export class FormComponent implements OnInit {
 
   back() { this.form.step--; }
 
-  /* Extract the values from the fields into a dict */
-  submit() { console.log("Submitting", this.form); }
+  submit() {
+
+    console.log("Submitting", this.form);
+    
+    this.set();
+  
+  }
 
 }

src/app/menu.component.ts

@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-menu',
-  template: `
-    <p>
-      menu works!
-    </p>
-  `,
-  styles: [
-  ]
-})
-export class MenuComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/assets/forms.ts

@@ -1,4 +1,4 @@
-export const forms: Form[] = [{
+export const checkout: Form = {
 
   name: "Check Out",
   submit: "/api/checkout",
@@ -47,7 +47,9 @@ export const forms: Form[] = [{
     }]
   }]
 
-}, {
+}
+
+export const checkin: Form = {
 
   name: "Check In",
   submit: "/api/checkin",
@@ -89,4 +91,4 @@ export const forms: Form[] = [{
     }]
   }]
 
-}];
+};