From a858cbf144ba4983987e3c5193f9cb5df1f1e0cb Mon Sep 17 00:00:00 2001
From: "Z. Charles Dziura" <zachary@dziura.email>
Date: Mon, 30 Jun 2025 23:44:56 -0400
Subject: [PATCH] I think I'm getting the hang of this...

---
 package-lock.json                             | 33 +++++++------
 package.json                                  |  2 +-
 .../views/starting-point/starting-point.html  |  8 +++-
 .../views/starting-point/starting-point.ts    | 48 +++++++++++++++++--
 4 files changed, 72 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fe0c496..63fb330 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
 				"@angular/forms": "^20.0.0",
 				"@angular/platform-browser": "^20.0.0",
 				"@angular/router": "^20.0.0",
-				"@ngrx/component-store": "^19.2.1",
+				"@ngrx/signals": "^19.2.1",
 				"@ngrx/store": "^19.2.1",
 				"@ngrx/store-devtools": "^19.2.1",
 				"rxjs": "~7.8.0",
@@ -2221,19 +2221,6 @@
 				"node": ">= 10"
 			}
 		},
-		"node_modules/@ngrx/component-store": {
-			"version": "19.2.1",
-			"resolved": "https://registry.npmjs.org/@ngrx/component-store/-/component-store-19.2.1.tgz",
-			"integrity": "sha512-a1ghKdR1O2YNQSQfbwC472u+SFK41PDJZuvRIJ8k6B0MKoUWD6LyD4owyrPCUMxtMz9PLoAkch7FUD5qxgY23Q==",
-			"license": "MIT",
-			"dependencies": {
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"@angular/core": "^19.0.0",
-				"rxjs": "^6.5.3 || ^7.5.0"
-			}
-		},
 		"node_modules/@ngrx/schematics": {
 			"version": "19.2.1",
 			"resolved": "https://registry.npmjs.org/@ngrx/schematics/-/schematics-19.2.1.tgz",
@@ -2241,6 +2228,24 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@ngrx/signals": {
+			"version": "19.2.1",
+			"resolved": "https://registry.npmjs.org/@ngrx/signals/-/signals-19.2.1.tgz",
+			"integrity": "sha512-Tajd2TVjkxxyFMhnMSWLa5pAWfynjP0VM0B/BCMaLiBrwBBxybxRVENoUDU5tGyiKSax/2tBJC3+sOglmxm27A==",
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.3.0"
+			},
+			"peerDependencies": {
+				"@angular/core": "^19.0.0",
+				"rxjs": "^6.5.3 || ^7.4.0"
+			},
+			"peerDependenciesMeta": {
+				"rxjs": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@ngrx/store": {
 			"version": "19.2.1",
 			"resolved": "https://registry.npmjs.org/@ngrx/store/-/store-19.2.1.tgz",
diff --git a/package.json b/package.json
index cafb93a..04c1bfb 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
 		"@angular/forms": "^20.0.0",
 		"@angular/platform-browser": "^20.0.0",
 		"@angular/router": "^20.0.0",
-		"@ngrx/component-store": "^19.2.1",
+		"@ngrx/signals": "^19.2.1",
 		"@ngrx/store": "^19.2.1",
 		"@ngrx/store-devtools": "^19.2.1",
 		"rxjs": "~7.8.0",
diff --git a/src/app/views/starting-point/starting-point.html b/src/app/views/starting-point/starting-point.html
index 6ba3f52..4c29a21 100644
--- a/src/app/views/starting-point/starting-point.html
+++ b/src/app/views/starting-point/starting-point.html
@@ -1 +1,7 @@
-<p>starting-point works!</p>
+<h1>
+	Hello {{ name() }}
+</h1>
+<form [formGroup]="form">
+	<label for="name">Your Name: </label>
+	<input id="name" type="text" formControlName="name">
+</form>
diff --git a/src/app/views/starting-point/starting-point.ts b/src/app/views/starting-point/starting-point.ts
index 2c259d5..e1b815f 100644
--- a/src/app/views/starting-point/starting-point.ts
+++ b/src/app/views/starting-point/starting-point.ts
@@ -1,10 +1,52 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, OnInit, Signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { StartingPointState, StartingPointStateStore } from './starting-point.state';
+
+export interface StartingPointForm {
+	name: string;
+	gender: Gender;
+	afterHighSchool: AfterHighSchool;
+}
+
+export enum Gender {
+	Undefined = '',
+	Male = 'male',
+	Female = 'female',
+}
+
+export enum AfterHighSchool {
+	Undefined = '',
+	College = 'college',
+	Workforce = 'workforce',
+}
 
 @Component({
 	selector: 'app-starting-point',
-	imports: [],
 	templateUrl: './starting-point.html',
 	styleUrl: './starting-point.scss',
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ReactiveFormsModule],
+	providers: [StartingPointStateStore],
 })
-export class StartingPoint {}
+export class StartingPoint implements OnInit {
+	private readonly state = inject(StartingPointStateStore);
+	readonly name = this.state.name;
+
+	private readonly fb = inject(FormBuilder);
+	readonly form = this.fb.group({
+		name: ['', Validators.required],
+		gender: [Gender.Undefined, Validators.required],
+		afterHighSchool: [AfterHighSchool.Undefined, Validators.required],
+	});
+
+	constructor() {
+		this.form.valueChanges
+			.pipe(takeUntilDestroyed())
+			.subscribe(({ name, gender, afterHighSchool }) =>
+				this.state.updateState({ name, gender, afterHighSchool } as Partial<StartingPointState>)
+			);
+	}
+
+	ngOnInit(): void {}
+}