Condense starting point state update into one function

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",

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",

src/app/app.html

@@ -1,4 +1,7 @@
 <main>
-	<h1>Hello, world!</h1>
-	<p>Current View: {{ currentView$ | async }}</p>
+	@switch (currentView$ | async) {
+		@default {
+			<app-starting-point></app-starting-point>
+		}
+	}
 </main>

src/app/app.ts

@@ -1,13 +1,15 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { selectCurrentView } from './state/state.selectors';
+import { StartingPoint } from './views/starting-point/starting-point';
 
 @Component({
 	selector: 'app-root',
 	templateUrl: './app.html',
 	styleUrl: './app.scss',
-	imports: [AsyncPipe],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [AsyncPipe, StartingPoint],
 })
 export class App implements OnInit {
 	private readonly store$ = inject(Store);

src/app/state/state.reducer.ts

@@ -5,7 +5,7 @@ export interface AppState {
 }
 
 export enum CurrentView {
-	StartingPoint = 0,
+	StartingPoint = 'startingPoint',
 }
 
 export const initialState: AppState = {

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

@@ -0,0 +1,7 @@
+<h1>
+	Hello {{ name() }}
+</h1>
+<form [formGroup]="form">
+	<label for="name">Your Name: </label>
+	<input id="name" type="text" formControlName="name">
+</form>

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

@@ -0,0 +1,37 @@
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+
+export type StartingPointState = {
+	name: string;
+	gender: Gender;
+	afterHighSchool: AfterHighSchool;
+};
+
+export enum Gender {
+	Undefined = '',
+	Male = 'male',
+	Female = 'female',
+}
+
+export enum AfterHighSchool {
+	Undefined = '',
+	College = 'college',
+	Workforce = 'workforce',
+}
+
+const initialState: StartingPointState = {
+	name: '',
+	gender: Gender.Undefined,
+	afterHighSchool: AfterHighSchool.Undefined,
+};
+
+export const StartingPointStateStore = signalStore(
+	withState(initialState),
+	withMethods(store => ({
+		updateState: ({ name, gender, afterHighSchool }: Partial<StartingPointState>) =>
+			patchState(store, () => ({
+				name: name ?? '',
+				gender: gender ?? Gender.Undefined,
+				afterHighSchool: afterHighSchool ?? AfterHighSchool.Undefined,
+			})),
+	}))
+);

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

@@ -0,0 +1,52 @@
+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',
+	templateUrl: './starting-point.html',
+	styleUrl: './starting-point.scss',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ReactiveFormsModule],
+	providers: [StartingPointStateStore],
+})
+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 {}
+}