Poorly designed starting point component: almost done!

package-lock.json

@@ -15,8 +15,6 @@
 				"@angular/platform-browser": "^20.0.0",
 				"@angular/router": "^20.0.0",
 				"@ngrx/signals": "^19.2.1",
-				"@ngrx/store": "^19.2.1",
-				"@ngrx/store-devtools": "^19.2.1",
 				"rxjs": "~7.8.0",
 				"tslib": "^2.3.0"
 			},
@@ -2246,33 +2244,6 @@
 				}
 			}
 		},
-		"node_modules/@ngrx/store": {
-			"version": "19.2.1",
-			"resolved": "https://registry.npmjs.org/@ngrx/store/-/store-19.2.1.tgz",
-			"integrity": "sha512-c5vQId7YoAhM0y4HASrz9mtLju+28vJspd6OBlhPbBlSae8GN8m9S/oav+8LaSY19yh95cZ5B/nMcLNNWgL/jA==",
-			"license": "MIT",
-			"dependencies": {
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"@angular/core": "^19.0.0",
-				"rxjs": "^6.5.3 || ^7.5.0"
-			}
-		},
-		"node_modules/@ngrx/store-devtools": {
-			"version": "19.2.1",
-			"resolved": "https://registry.npmjs.org/@ngrx/store-devtools/-/store-devtools-19.2.1.tgz",
-			"integrity": "sha512-gj1YO+4yl6D0l9vzLWdw07TQSu5UPKgsSLsNJfDLXraaLCUcB8voAp4J7zohN8qR5ixDuHeMoiSSVuklQ75u2w==",
-			"license": "MIT",
-			"dependencies": {
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"@angular/core": "^19.0.0",
-				"@ngrx/store": "19.2.1",
-				"rxjs": "^6.5.3 || ^7.5.0"
-			}
-		},
 		"node_modules/@npmcli/agent": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-3.0.0.tgz",

package.json

@@ -16,8 +16,6 @@
 		"@angular/platform-browser": "^20.0.0",
 		"@angular/router": "^20.0.0",
 		"@ngrx/signals": "^19.2.1",
-		"@ngrx/store": "^19.2.1",
-		"@ngrx/store-devtools": "^19.2.1",
 		"rxjs": "~7.8.0",
 		"tslib": "^2.3.0"
 	},

src/app/app.config.ts

@@ -1,21 +1,5 @@
-import {
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
-	ApplicationConfig,
-	isDevMode,
-	provideBrowserGlobalErrorListeners,
-	provideZonelessChangeDetection,
-} from '@angular/core';
-import { provideStoreDevtools } from '@ngrx/store-devtools';
 
 export const appConfig: ApplicationConfig = {
-	providers: [
+	providers: [provideBrowserGlobalErrorListeners(), provideZonelessChangeDetection()],
-		provideBrowserGlobalErrorListeners(),
-		provideZonelessChangeDetection(),
-		provideStoreDevtools({
-			maxAge: 25,
-			logOnly: !isDevMode(),
-			autoPause: true,
-			trace: false,
-			traceLimit: 75,
-		}),
-	],
 };

src/app/views/starting-point/starting-point.html

@@ -1,7 +1,24 @@
-<h1>
-	Hello {{ name() }}
-</h1>
 <form [formGroup]="form">
-	<label for="name">Your Name: </label>
+	<div class="name">
-	<input id="name" type="text" formControlName="name">
+		<label for="name">Your Name: </label>
+		<input id="name" type="text" formControlName="name">
+	</div>
+	<div class="gender">
+		<label for="gender">Your Gender:</label>
+		<select id="gender" formControlName="gender">
+			<option value="">--Please select a gender--</option>
+			@for (option of genders(); track $index) {
+				<option value="{{ option.value }}">{{ option.desc }}</option>
+			}
+		</select>
+	</div>
+	<div class="after-high-school">
+		<label for="after-high-school">What You're Doing After Graduation:</label>
+		<select id="after-high-school" formControlName="afterHighSchool">
+			<option value="">--Please select an option--</option>
+			@for (option of afterHighSchoolOptions(); track $index) {
+				<option value="{{ option.value }}">{{ option.desc }}</option>
+			}
+		</select>
+	</div>
 </form>

src/app/views/starting-point/starting-point.state.ts

@@ -1,4 +1,5 @@
-import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+import { effect } from '@angular/core';
+import { getState, patchState, signalStore, withHooks, withMethods, withState } from '@ngrx/signals';
 
 export type StartingPointState = {
 	name: string;
@@ -33,5 +34,13 @@ export const StartingPointStateStore = signalStore(
 				gender: gender ?? Gender.Undefined,
 				afterHighSchool: afterHighSchool ?? AfterHighSchool.Undefined,
 			})),
-	}))
+	})),
+	withHooks({
+		onInit: store => {
+			effect(() => {
+				const state = getState(store);
+				console.log(state);
+			});
+		},
+	})
 );

src/app/views/starting-point/starting-point.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, OnInit, Signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, 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';
@@ -40,6 +40,28 @@ export class StartingPoint implements OnInit {
 		afterHighSchool: [AfterHighSchool.Undefined, Validators.required],
 	});
 
+	readonly genders = signal<Array<{ desc: string; value: Gender }>>([
+		{
+			desc: 'Female',
+			value: Gender.Female,
+		},
+		{
+			desc: 'Male',
+			value: Gender.Male,
+		},
+	]).asReadonly();
+
+	readonly afterHighSchoolOptions = signal<Array<{ desc: string; value: AfterHighSchool }>>([
+		{
+			desc: 'Go to College',
+			value: AfterHighSchool.College,
+		},
+		{
+			desc: 'Enter the Workforce',
+			value: AfterHighSchool.Workforce,
+		},
+	]).asReadonly();
+
 	constructor() {
 		this.form.valueChanges
 			.pipe(takeUntilDestroyed())
@@ -49,4 +71,6 @@ export class StartingPoint implements OnInit {
 	}
 
 	ngOnInit(): void {}
+
+	onSubmit() {}
 }

tsconfig.json

@@ -26,9 +26,6 @@
   "references": [
     {
       "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
     }
   ]
 }