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,29 +1,5 @@
-import {
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
-	ApplicationConfig,
-	importProvidersFrom,
-	isDevMode,
-	provideBrowserGlobalErrorListeners,
-	provideZonelessChangeDetection,
-} from '@angular/core';
-import { StoreModule } from '@ngrx/store';
-import { provideStoreDevtools } from '@ngrx/store-devtools';
-import { appStateReducer } from './state/state.reducer';
 
 export const appConfig: ApplicationConfig = {
-	providers: [
+	providers: [provideBrowserGlobalErrorListeners(), provideZonelessChangeDetection()],
-		provideBrowserGlobalErrorListeners(),
-		provideZonelessChangeDetection(),
-		importProvidersFrom(
-			StoreModule.forRoot({
-				app: appStateReducer,
-			})
-		),
-		provideStoreDevtools({
-			maxAge: 25,
-			logOnly: !isDevMode(),
-			autoPause: true,
-			trace: false,
-			traceLimit: 75,
-		}),
-	],
 };

src/app/app.html

@@ -1,5 +1,5 @@
 <main>
-	@switch (currentView$ | async) {
+	@switch (currentView()) {
 		@default {
 			<app-starting-point></app-starting-point>
 		}

src/app/app.state.ts

@@ -0,0 +1,25 @@
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+
+export type AppState = {
+	currentView: CurrentView;
+};
+
+export enum CurrentView {
+	StartingPoint = 'startingPoint',
+}
+
+const initialState: AppState = {
+	currentView: CurrentView.StartingPoint,
+};
+
+export const AppStateStore = signalStore(
+	{ providedIn: 'root' },
+	withState(initialState),
+	withMethods(store => ({
+		updateCurrentView: (currentView: CurrentView) =>
+			patchState(store, () => ({
+				...store,
+				currentView,
+			})),
+	}))
+);

src/app/app.ts

@@ -1,7 +1,5 @@
-import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
+import { AppStateStore } from './app.state';
-import { selectCurrentView } from './state/state.selectors';
 import { StartingPoint } from './views/starting-point/starting-point';
 
 @Component({
@@ -9,12 +7,11 @@ import { StartingPoint } from './views/starting-point/starting-point';
 	templateUrl: './app.html',
 	styleUrl: './app.scss',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [AsyncPipe, StartingPoint],
+	imports: [StartingPoint],
 })
 export class App implements OnInit {
-	private readonly store$ = inject(Store);
+	private readonly state = inject(AppStateStore);
-
+	readonly currentView = this.state.currentView;
-	readonly currentView$ = this.store$.pipe(select(selectCurrentView));
 
 	ngOnInit(): void {}
 }

src/app/state/state.reducer.ts

@@ -1,15 +0,0 @@
-import { createReducer } from '@ngrx/store';
-
-export interface AppState {
-	currentView: CurrentView;
-}
-
-export enum CurrentView {
-	StartingPoint = 'startingPoint',
-}
-
-export const initialState: AppState = {
-	currentView: CurrentView.StartingPoint,
-};
-
-export const appStateReducer = createReducer(initialState);

src/app/state/state.selectors.ts

@@ -1,6 +0,0 @@
-import { createFeatureSelector, createSelector } from '@ngrx/store';
-import { AppState } from './state.reducer';
-
-export const selectAppState = createFeatureSelector<AppState>('app');
-
-export const selectCurrentView = createSelector(selectAppState, (state: AppState) => state.currentView);

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"
     }
   ]
 }