Add starting point component to view

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 @@
+<p>starting-point works!</p>

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

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'app-starting-point',
+	imports: [],
+	templateUrl: './starting-point.html',
+	styleUrl: './starting-point.scss',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StartingPoint {}