thank you page

src/app/app-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home.component';
+import { ThanksComponent } from './thanks.component';
+
+const routes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'thanks', component: ThanksComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.ts

@@ -1,39 +1,13 @@
 import { Component } from '@angular/core';
 
-import { checkin, checkout } from "src/assets/forms";
-
 @Component({
   selector: 'app-root',
   template: `
-      <div class="menu">
-          
-        <button (click)="switch('checkout')">Check Out</button>
-        <button (click)="switch('checkin')">Check In</button>
-
-      </div>
-
-      <app-form *ngIf="action=='checkin'" [template]="checkin"></app-form>
-
-      <app-form *ngIf="action=='checkout'" [template]="checkout"></app-form>
-
-      <footer>Accenture | 2022</footer>
+      <router-outlet></router-outlet>
   `
 })
 export class AppComponent {
-  
-  checkin: Form = checkin;
-  checkout: Form = checkout;
-
-  action: string = "checkout";
 
   ngOnInit() { }
 
-  switch(action: string) {
-
-    alert("Are you sure?");
-
-    this.action = action;
-
-  }
-
 }

src/app/app.module.ts

@@ -9,6 +9,9 @@ import { RadioComponent } from './radio.component';
 import { StepComponent } from './step.component';
 import { CameraComponent } from './camera.component';
 import { SignComponent } from './sign.component';
+import { ThanksComponent } from './thanks.component';
+import { AppRoutingModule } from './app-routing.module';
+import { HomeComponent } from './home.component';
 
 @NgModule({
   declarations: [
@@ -19,10 +22,13 @@ import { SignComponent } from './sign.component';
     StepComponent,
     CameraComponent,
     SignComponent,
+    ThanksComponent,
+    HomeComponent,
   ],
   imports: [
     BrowserModule,
     FormsModule,
+    AppRoutingModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/form.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-form',
@@ -35,6 +36,8 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class FormComponent implements OnInit {
 
+  constructor(private route: Router) { }
+
   @Input() template: Form;
 
   form: Form;
@@ -75,6 +78,8 @@ export class FormComponent implements OnInit {
 
         this.set();
 
+        this.route.navigate(["/thanks"]);
+
       } else {
 
         alert("Backend does't like you.");

src/app/home.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+
+import { checkin, checkout } from "src/assets/forms";
+
+@Component({
+  selector: 'app-home',
+  template: `
+    <div class="menu">
+        
+      <button (click)="switch('checkout')">Check Out</button>
+      <button (click)="switch('checkin')">Check In</button>
+
+    </div>
+
+    <app-form *ngIf="action=='checkin'" [template]="checkin"></app-form>
+
+    <app-form *ngIf="action=='checkout'" [template]="checkout"></app-form>
+
+    <footer>Accenture | 2022</footer>
+  `
+})
+export class HomeComponent implements OnInit {
+
+  checkin: Form = checkin;
+  checkout: Form = checkout;
+
+  action: string = "checkout";
+
+  ngOnInit() { }
+
+  switch(action: string) {
+
+    alert("Are you sure?");
+
+    this.action = action;
+
+  }
+
+}

src/app/thanks.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-thanks',
+  template: `
+    <p>
+      Thank-You!
+
+      <a routerLink="/">Go Home</a>
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class ThanksComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}