From 0c1ff86ac8941105fcab0eeb927e777868991155 Mon Sep 17 00:00:00 2001
From: Sheik Althaf <althafmech@outlook.com>
Date: Thu, 8 Aug 2024 07:02:20 +0530
Subject: [PATCH 01/10] docs: update example app to standalone

Updated the example app to standalone, removed all the modules from app.
---
 projects/example-app/src/app/app.config.ts    | 78 ++++++++++++++++++
 projects/example-app/src/app/app.module.ts    | 81 -------------------
 .../{app-routing.module.ts => app.routing.ts} | 22 ++---
 .../src/app/auth/auth-routing.module.ts       | 13 ---
 .../example-app/src/app/auth/auth.module.ts   | 37 ---------
 .../example-app/src/app/auth/auth.routes.ts   | 10 +++
 .../components/login-form.component.spec.ts   |  6 +-
 .../auth/components/login-form.component.ts   |  6 +-
 ...gout-confirmation-dialog.component.spec.ts |  4 +-
 .../logout-confirmation-dialog.component.ts   |  3 +
 .../containers/login-page.component.spec.ts   |  9 +--
 .../auth/containers/login-page.component.ts   |  4 +
 projects/example-app/src/app/auth/index.ts    |  1 -
 .../src/app/books/books-routing.module.ts     | 34 --------
 .../example-app/src/app/books/books.module.ts | 69 ----------------
 .../example-app/src/app/books/books.routes.ts | 54 +++++++++++++
 .../components/book-authors.component.ts      |  4 +
 .../books/components/book-detail.component.ts |  5 ++
 .../components/book-preview-list.component.ts |  4 +
 .../components/book-preview.component.ts      | 13 +++
 .../books/components/book-search.component.ts |  4 +
 .../collection-page.component.spec.ts         | 22 +----
 .../containers/collection-page.component.ts   |  5 ++
 .../find-book-page.component.spec.ts          | 30 +------
 .../containers/find-book-page.component.ts    |  4 +
 .../selected-book-page.component.spec.ts      | 19 +----
 .../selected-book-page.component.ts           |  4 +
 .../view-book-page.component.spec.ts          | 16 +---
 .../containers/view-book-page.component.ts    |  3 +
 .../app/core/components/layout.component.ts   |  3 +
 .../app/core/components/nav-item.component.ts |  5 ++
 .../app/core/components/sidenav.component.ts  |  3 +
 .../app/core/components/toolbar.component.ts  |  3 +
 .../src/app/core/containers/app.component.ts  | 19 +++++
 .../containers/not-found-page.component.ts    |  4 +
 .../example-app/src/app/core/core.module.ts   | 31 -------
 projects/example-app/src/app/core/index.ts    |  1 -
 .../src/app/material/material.module.ts       | 38 +++------
 .../src/app/shared/pipes/add-commas.pipe.ts   |  5 +-
 .../src/app/shared/pipes/ellipsis.pipe.ts     |  5 +-
 projects/example-app/src/main.ts              |  9 +--
 41 files changed, 286 insertions(+), 404 deletions(-)
 create mode 100644 projects/example-app/src/app/app.config.ts
 delete mode 100644 projects/example-app/src/app/app.module.ts
 rename projects/example-app/src/app/{app-routing.module.ts => app.routing.ts} (50%)
 delete mode 100644 projects/example-app/src/app/auth/auth-routing.module.ts
 delete mode 100644 projects/example-app/src/app/auth/auth.module.ts
 create mode 100644 projects/example-app/src/app/auth/auth.routes.ts
 delete mode 100644 projects/example-app/src/app/auth/index.ts
 delete mode 100644 projects/example-app/src/app/books/books-routing.module.ts
 delete mode 100644 projects/example-app/src/app/books/books.module.ts
 create mode 100644 projects/example-app/src/app/books/books.routes.ts
 delete mode 100644 projects/example-app/src/app/core/core.module.ts
 delete mode 100644 projects/example-app/src/app/core/index.ts

diff --git a/projects/example-app/src/app/app.config.ts b/projects/example-app/src/app/app.config.ts
new file mode 100644
index 0000000000..ea8ea569c0
--- /dev/null
+++ b/projects/example-app/src/app/app.config.ts
@@ -0,0 +1,78 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
+import { provideState, provideStore } from '@ngrx/store';
+import { provideEffects } from '@ngrx/effects';
+import { provideRouterStore } from '@ngrx/router-store';
+import { provideStoreDevtools } from '@ngrx/store-devtools';
+
+import { rootReducers, metaReducers } from '@example-app/reducers';
+
+import { APP_ROUTES } from '@example-app/app.routing';
+import { UserEffects, RouterEffects } from '@example-app/core/effects';
+import { provideRouter, withHashLocation } from '@angular/router';
+import * as fromAuth from '@example-app/auth/reducers';
+import { AuthEffects } from './auth/effects';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimationsAsync(),
+    provideHttpClient(),
+    provideRouter(APP_ROUTES, withHashLocation()),
+
+    /**
+     * provideStore() is imported once in the root providers, accepting a reducer
+     * function or object map of reducer functions. If passed an object of
+     * reducers, combineReducers will be run creating your application
+     * meta-reducer. This returns all providers for an @ngrx/store
+     * based application.
+     */
+    provideStore(rootReducers, {
+      metaReducers,
+      runtimeChecks: {
+        // strictStateImmutability and strictActionImmutability are enabled by default
+        strictStateSerializability: true,
+        strictActionSerializability: true,
+        strictActionWithinNgZone: true,
+        strictActionTypeUniqueness: true,
+      },
+    }),
+
+    /**
+     * @ngrx/router-store keeps router state up-to-date in the store.
+     */
+    provideRouterStore(),
+
+    /**
+     * Store devtools instrument the store retaining past versions of state
+     * and recalculating new states. This enables powerful time-travel
+     * debugging.
+     *
+     * To use the debugger, install the Redux Devtools extension for either
+     * Chrome or Firefox
+     *
+     * See: https://github.com/zalmoxisus/redux-devtools-extension
+     */
+    provideStoreDevtools({
+      name: 'NgRx Book Store App',
+      // In a production build you would want to disable the Store Devtools
+      // logOnly: !isDevMode(),
+    }),
+
+    /**
+     * The provideEffects() function is used to register effect classes
+     * so they are initialized when the application starts.
+     */
+    provideEffects(UserEffects, RouterEffects, AuthEffects),
+
+    /**
+     * The Auth state is provided here to ensure that the login details
+     * are available as soon as the application starts.
+     */
+    provideState({
+      name: fromAuth.authFeatureKey,
+      reducer: fromAuth.reducers,
+    }),
+  ],
+};
diff --git a/projects/example-app/src/app/app.module.ts b/projects/example-app/src/app/app.module.ts
deleted file mode 100644
index 1f66f73f6a..0000000000
--- a/projects/example-app/src/app/app.module.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { StoreRouterConnectingModule } from '@ngrx/router-store';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-
-import { AuthModule } from '@example-app/auth';
-
-import { rootReducers, metaReducers } from '@example-app/reducers';
-
-import { CoreModule } from '@example-app/core';
-import { AppRoutingModule } from '@example-app/app-routing.module';
-import { UserEffects, RouterEffects } from '@example-app/core/effects';
-import { AppComponent } from '@example-app/core/containers';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    AuthModule,
-    AppRoutingModule,
-
-    /**
-     * StoreModule.forRoot is imported once in the root module, accepting a reducer
-     * function or object map of reducer functions. If passed an object of
-     * reducers, combineReducers will be run creating your application
-     * meta-reducer. This returns all providers for an @ngrx/store
-     * based application.
-     */
-    StoreModule.forRoot(rootReducers, {
-      metaReducers,
-      runtimeChecks: {
-        // strictStateImmutability and strictActionImmutability are enabled by default
-        strictStateSerializability: true,
-        strictActionSerializability: true,
-        strictActionWithinNgZone: true,
-        strictActionTypeUniqueness: true,
-      },
-    }),
-
-    /**
-     * @ngrx/router-store keeps router state up-to-date in the store.
-     */
-    StoreRouterConnectingModule.forRoot(),
-
-    /**
-     * Store devtools instrument the store retaining past versions of state
-     * and recalculating new states. This enables powerful time-travel
-     * debugging.
-     *
-     * To use the debugger, install the Redux Devtools extension for either
-     * Chrome or Firefox
-     *
-     * See: https://github.com/zalmoxisus/redux-devtools-extension
-     */
-    StoreDevtoolsModule.instrument({
-      name: 'NgRx Book Store App',
-      // In a production build you would want to disable the Store Devtools
-      // logOnly: !isDevMode(),
-    }),
-
-    /**
-     * EffectsModule.forRoot() is imported once in the root module and
-     * sets up the effects class to be initialized immediately when the
-     * application starts.
-     *
-     * See: https://ngrx.io/guide/effects#registering-root-effects
-     */
-    EffectsModule.forRoot(UserEffects, RouterEffects),
-    CoreModule,
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
diff --git a/projects/example-app/src/app/app-routing.module.ts b/projects/example-app/src/app/app.routing.ts
similarity index 50%
rename from projects/example-app/src/app/app-routing.module.ts
rename to projects/example-app/src/app/app.routing.ts
index cba7ce2327..d4606d572a 100644
--- a/projects/example-app/src/app/app-routing.module.ts
+++ b/projects/example-app/src/app/app.routing.ts
@@ -1,15 +1,19 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { authGuard } from '@example-app/auth/services';
 import { NotFoundPageComponent } from '@example-app/core/containers';
 
-export const routes: Routes = [
+export const APP_ROUTES: Routes = [
+  {
+    path: 'login',
+    loadChildren: () =>
+      import('@example-app/auth/auth.routes').then((m) => m.AUTH_ROUTES),
+  },
   { path: '', redirectTo: '/books', pathMatch: 'full' },
   {
     path: 'books',
     loadChildren: () =>
-      import('@example-app/books/books.module').then((m) => m.BooksModule),
+      import('@example-app/books/books.routes').then((m) => m.BOOKS_ROUTES),
     canActivate: [authGuard],
   },
   {
@@ -18,13 +22,3 @@ export const routes: Routes = [
     data: { title: 'Not found' },
   },
 ];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, {
-      useHash: true,
-    }),
-  ],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
diff --git a/projects/example-app/src/app/auth/auth-routing.module.ts b/projects/example-app/src/app/auth/auth-routing.module.ts
deleted file mode 100644
index 62ceda18b6..0000000000
--- a/projects/example-app/src/app/auth/auth-routing.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { LoginPageComponent } from '@example-app/auth/containers';
-
-const routes: Routes = [
-  { path: 'login', component: LoginPageComponent, data: { title: 'Login' } },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class AuthRoutingModule {}
diff --git a/projects/example-app/src/app/auth/auth.module.ts b/projects/example-app/src/app/auth/auth.module.ts
deleted file mode 100644
index 39527caa8a..0000000000
--- a/projects/example-app/src/app/auth/auth.module.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { LoginPageComponent } from '@example-app/auth/containers';
-import {
-  LoginFormComponent,
-  LogoutConfirmationDialogComponent,
-} from '@example-app/auth/components';
-
-import { AuthEffects } from '@example-app/auth/effects';
-import * as fromAuth from '@example-app/auth/reducers';
-import { MaterialModule } from '@example-app/material';
-import { AuthRoutingModule } from './auth-routing.module';
-
-export const COMPONENTS = [
-  LoginPageComponent,
-  LoginFormComponent,
-  LogoutConfirmationDialogComponent,
-];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    MaterialModule,
-    AuthRoutingModule,
-    StoreModule.forFeature({
-      name: fromAuth.authFeatureKey,
-      reducer: fromAuth.reducers,
-    }),
-    EffectsModule.forFeature(AuthEffects),
-  ],
-  declarations: COMPONENTS,
-})
-export class AuthModule {}
diff --git a/projects/example-app/src/app/auth/auth.routes.ts b/projects/example-app/src/app/auth/auth.routes.ts
new file mode 100644
index 0000000000..7197a2c553
--- /dev/null
+++ b/projects/example-app/src/app/auth/auth.routes.ts
@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+import { LoginPageComponent } from '@example-app/auth/containers';
+
+export const AUTH_ROUTES: Routes = [
+  {
+    path: '',
+    component: LoginPageComponent,
+    data: { title: 'Login' },
+  },
+];
diff --git a/projects/example-app/src/app/auth/components/login-form.component.spec.ts b/projects/example-app/src/app/auth/components/login-form.component.spec.ts
index 52aba4fbe0..0cb1e3456a 100644
--- a/projects/example-app/src/app/auth/components/login-form.component.spec.ts
+++ b/projects/example-app/src/app/auth/components/login-form.component.spec.ts
@@ -1,7 +1,7 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { LoginFormComponent } from '@example-app/auth/components';
-import { ReactiveFormsModule } from '@angular/forms';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 describe('Login Page', () => {
   let fixture: ComponentFixture<LoginFormComponent>;
@@ -9,8 +9,8 @@ describe('Login Page', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule],
-      declarations: [LoginFormComponent],
+      imports: [LoginFormComponent],
+      providers: [provideNoopAnimations()],
       schemas: [NO_ERRORS_SCHEMA],
     });
 
diff --git a/projects/example-app/src/app/auth/components/login-form.component.ts b/projects/example-app/src/app/auth/components/login-form.component.ts
index 2357726616..269d298e86 100644
--- a/projects/example-app/src/app/auth/components/login-form.component.ts
+++ b/projects/example-app/src/app/auth/components/login-form.component.ts
@@ -1,9 +1,13 @@
+import { NgIf } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Credentials } from '@example-app/auth/models';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-login-form',
+  imports: [MaterialModule, ReactiveFormsModule, NgIf],
   template: `
     <mat-card>
       <mat-card-title>Login</mat-card-title>
diff --git a/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.spec.ts b/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.spec.ts
index 78066eadee..0f3fe7d746 100644
--- a/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.spec.ts
+++ b/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.spec.ts
@@ -1,14 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LogoutConfirmationDialogComponent } from '@example-app/auth/components';
-import { MaterialModule } from '@example-app/material';
 
 describe('Logout Confirmation Dialog', () => {
   let fixture: ComponentFixture<LogoutConfirmationDialogComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      declarations: [LogoutConfirmationDialogComponent],
+      imports: [LogoutConfirmationDialogComponent],
     });
 
     fixture = TestBed.createComponent(LogoutConfirmationDialogComponent);
diff --git a/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.ts b/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.ts
index 1ee60f1102..eeff134db7 100644
--- a/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.ts
+++ b/projects/example-app/src/app/auth/components/logout-confirmation-dialog.component.ts
@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 /**
  * The dialog will close with true if user clicks the ok button,
  * otherwise it will close with undefined.
  */
 @Component({
+  standalone: true,
+  imports: [MaterialModule],
   template: `
     <h2 mat-dialog-title>Logout</h2>
     <mat-dialog-content>Are you sure you want to logout?</mat-dialog-content>
diff --git a/projects/example-app/src/app/auth/containers/login-page.component.spec.ts b/projects/example-app/src/app/auth/containers/login-page.component.spec.ts
index b9433c4573..7f367b213f 100644
--- a/projects/example-app/src/app/auth/containers/login-page.component.spec.ts
+++ b/projects/example-app/src/app/auth/containers/login-page.component.spec.ts
@@ -1,12 +1,9 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { LoginPageComponent } from '@example-app/auth/containers';
-import { LoginFormComponent } from '@example-app/auth/components';
 import * as fromAuth from '@example-app/auth/reducers';
 import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
-import { MaterialModule } from '@example-app/material';
 
 describe('Login Page', () => {
   let fixture: ComponentFixture<LoginPageComponent>;
@@ -15,9 +12,9 @@ describe('Login Page', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, MaterialModule, ReactiveFormsModule],
-      declarations: [LoginPageComponent, LoginFormComponent],
+      imports: [LoginPageComponent],
       providers: [
+        provideNoopAnimations(),
         provideMockStore({
           selectors: [
             { selector: fromAuth.selectLoginPagePending, value: false },
diff --git a/projects/example-app/src/app/auth/containers/login-page.component.ts b/projects/example-app/src/app/auth/containers/login-page.component.ts
index d5dec368ee..e85d256c94 100644
--- a/projects/example-app/src/app/auth/containers/login-page.component.ts
+++ b/projects/example-app/src/app/auth/containers/login-page.component.ts
@@ -3,9 +3,13 @@ import { Store } from '@ngrx/store';
 import { Credentials } from '@example-app/auth/models';
 import * as fromAuth from '@example-app/auth/reducers';
 import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
+import { LoginFormComponent } from '../components';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-login-page',
+  imports: [LoginFormComponent, AsyncPipe],
   template: `
     <bc-login-form
       (submitted)="onSubmit($event)"
diff --git a/projects/example-app/src/app/auth/index.ts b/projects/example-app/src/app/auth/index.ts
deleted file mode 100644
index c5c262c905..0000000000
--- a/projects/example-app/src/app/auth/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './auth.module';
diff --git a/projects/example-app/src/app/books/books-routing.module.ts b/projects/example-app/src/app/books/books-routing.module.ts
deleted file mode 100644
index d04d377a93..0000000000
--- a/projects/example-app/src/app/books/books-routing.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import {
-  CollectionPageComponent,
-  FindBookPageComponent,
-  ViewBookPageComponent,
-} from '@example-app/books/containers';
-import { bookExistsGuard } from '@example-app/books/guards';
-
-export const routes: Routes = [
-  {
-    path: 'find',
-    component: FindBookPageComponent,
-    data: { title: 'Find book' },
-  },
-  {
-    path: ':id',
-    component: ViewBookPageComponent,
-    canActivate: [bookExistsGuard],
-    data: { title: 'Book details' },
-  },
-  {
-    path: '',
-    component: CollectionPageComponent,
-    data: { title: 'Collection' },
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class BooksRoutingModule {}
diff --git a/projects/example-app/src/app/books/books.module.ts b/projects/example-app/src/app/books/books.module.ts
deleted file mode 100644
index 0f00109339..0000000000
--- a/projects/example-app/src/app/books/books.module.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { EffectsModule } from '@ngrx/effects';
-import { StoreModule } from '@ngrx/store';
-
-import { BooksRoutingModule } from '@example-app/books/books-routing.module';
-import {
-  BookAuthorsComponent,
-  BookDetailComponent,
-  BookPreviewComponent,
-  BookPreviewListComponent,
-  BookSearchComponent,
-} from '@example-app/books/components';
-import {
-  CollectionPageComponent,
-  FindBookPageComponent,
-  SelectedBookPageComponent,
-  ViewBookPageComponent,
-} from '@example-app/books/containers';
-import { BookEffects, CollectionEffects } from '@example-app/books/effects';
-
-import * as fromBooks from '@example-app/books/reducers';
-import { MaterialModule } from '@example-app/material';
-import { PipesModule } from '@example-app/shared/pipes';
-
-export const COMPONENTS = [
-  BookAuthorsComponent,
-  BookDetailComponent,
-  BookPreviewComponent,
-  BookPreviewListComponent,
-  BookSearchComponent,
-];
-
-export const CONTAINERS = [
-  FindBookPageComponent,
-  ViewBookPageComponent,
-  SelectedBookPageComponent,
-  CollectionPageComponent,
-];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    MaterialModule,
-    BooksRoutingModule,
-
-    /**
-     * StoreModule.forFeature is used for composing state
-     * from feature modules. These modules can be loaded
-     * eagerly or lazily and will be dynamically added to
-     * the existing state.
-     */
-    StoreModule.forFeature(fromBooks.booksFeatureKey, fromBooks.reducers),
-
-    /**
-     * Effects.forFeature is used to register effects
-     * from feature modules. Effects can be loaded
-     * eagerly or lazily and will be started immediately.
-     *
-     * All Effects will only be instantiated once regardless of
-     * whether they are registered once or multiple times.
-     */
-    EffectsModule.forFeature(BookEffects, CollectionEffects),
-    PipesModule,
-  ],
-  declarations: [COMPONENTS, CONTAINERS],
-})
-export class BooksModule {}
diff --git a/projects/example-app/src/app/books/books.routes.ts b/projects/example-app/src/app/books/books.routes.ts
new file mode 100644
index 0000000000..7767e91619
--- /dev/null
+++ b/projects/example-app/src/app/books/books.routes.ts
@@ -0,0 +1,54 @@
+import { Routes } from '@angular/router';
+
+import {
+  CollectionPageComponent,
+  FindBookPageComponent,
+  ViewBookPageComponent,
+} from '@example-app/books/containers';
+import { bookExistsGuard } from '@example-app/books/guards';
+import { provideState } from '@ngrx/store';
+import * as fromBooks from '@example-app/books/reducers';
+import { provideEffects } from '@ngrx/effects';
+import { BookEffects, CollectionEffects } from './effects';
+
+export const BOOKS_ROUTES: Routes = [
+  {
+    path: '',
+    providers: [
+      /**
+       * provideState() is used for composing state
+       * from feature modules. These modules can be loaded
+       * eagerly or lazily and will be dynamically added to
+       * the existing state.
+       */
+      provideState(fromBooks.booksFeatureKey, fromBooks.reducers),
+      /**
+       * provideEffects() is used to register effects
+       * from feature modules. Effects can be loaded
+       * eagerly or lazily and will be started immediately.
+       *
+       * All Effects will only be instantiated once regardless of
+       * whether they are registered once or multiple times.
+       */
+      provideEffects(BookEffects, CollectionEffects),
+    ],
+    children: [
+      {
+        path: 'find',
+        component: FindBookPageComponent,
+        data: { title: 'Find book' },
+      },
+      {
+        path: ':id',
+        component: ViewBookPageComponent,
+        canActivate: [bookExistsGuard],
+        data: { title: 'Book details' },
+      },
+      {
+        path: '',
+        component: CollectionPageComponent,
+        data: { title: 'Collection' },
+      },
+    ],
+  },
+];
diff --git a/projects/example-app/src/app/books/components/book-authors.component.ts b/projects/example-app/src/app/books/components/book-authors.component.ts
index 2fb72a9ef3..5a59cb23bd 100644
--- a/projects/example-app/src/app/books/components/book-authors.component.ts
+++ b/projects/example-app/src/app/books/components/book-authors.component.ts
@@ -1,9 +1,13 @@
 import { Component, Input } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
+import { MaterialModule } from '@example-app/material';
+import { AddCommasPipe } from '@example-app/shared/pipes/add-commas.pipe';
 
 @Component({
+  standalone: true,
   selector: 'bc-book-authors',
+  imports: [MaterialModule, AddCommasPipe],
   template: `
     <h5 mat-subheader>Written By:</h5>
     <span>
diff --git a/projects/example-app/src/app/books/components/book-detail.component.ts b/projects/example-app/src/app/books/components/book-detail.component.ts
index ae1c59958f..3453300464 100644
--- a/projects/example-app/src/app/books/components/book-detail.component.ts
+++ b/projects/example-app/src/app/books/components/book-detail.component.ts
@@ -1,9 +1,14 @@
+import { NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
+import { MaterialModule } from '@example-app/material';
+import { BookAuthorsComponent } from './book-authors.component';
 
 @Component({
+  standalone: true,
   selector: 'bc-book-detail',
+  imports: [MaterialModule, NgIf, BookAuthorsComponent],
   template: `
     <mat-card *ngIf="book">
       <mat-card-title-group>
diff --git a/projects/example-app/src/app/books/components/book-preview-list.component.ts b/projects/example-app/src/app/books/components/book-preview-list.component.ts
index b93c3e83e7..7ef391e47e 100644
--- a/projects/example-app/src/app/books/components/book-preview-list.component.ts
+++ b/projects/example-app/src/app/books/components/book-preview-list.component.ts
@@ -1,9 +1,13 @@
 import { Component, Input } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
+import { BookPreviewComponent } from './book-preview.component';
+import { NgFor } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-book-preview-list',
+  imports: [BookPreviewComponent, NgFor],
   template: `
     <bc-book-preview *ngFor="let book of books" [book]="book"></bc-book-preview>
   `,
diff --git a/projects/example-app/src/app/books/components/book-preview.component.ts b/projects/example-app/src/app/books/components/book-preview.component.ts
index 41a5f4c14d..eb56168424 100644
--- a/projects/example-app/src/app/books/components/book-preview.component.ts
+++ b/projects/example-app/src/app/books/components/book-preview.component.ts
@@ -1,9 +1,22 @@
 import { Component, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 import { Book } from '@example-app/books/models';
+import { MaterialModule } from '@example-app/material';
+import { EllipsisPipe } from '@example-app/shared/pipes/ellipsis.pipe';
+import { BookAuthorsComponent } from './book-authors.component';
+import { NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-book-preview',
+  imports: [
+    MaterialModule,
+    RouterLink,
+    EllipsisPipe,
+    BookAuthorsComponent,
+    NgIf,
+  ],
   template: `
     <a [routerLink]="['/books', id]">
       <mat-card>
diff --git a/projects/example-app/src/app/books/components/book-search.component.ts b/projects/example-app/src/app/books/components/book-search.component.ts
index 1ae6822056..28c4f161d7 100644
--- a/projects/example-app/src/app/books/components/book-search.component.ts
+++ b/projects/example-app/src/app/books/components/book-search.component.ts
@@ -1,7 +1,11 @@
+import { NgIf } from '@angular/common';
 import { Component, Output, Input, EventEmitter } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-book-search',
+  imports: [MaterialModule, NgIf],
   template: `
     <mat-card>
       <mat-card-title>Find a Book</mat-card-title>
diff --git a/projects/example-app/src/app/books/containers/collection-page.component.spec.ts b/projects/example-app/src/app/books/containers/collection-page.component.spec.ts
index 5addaa4aef..257cf36940 100644
--- a/projects/example-app/src/app/books/containers/collection-page.component.spec.ts
+++ b/projects/example-app/src/app/books/containers/collection-page.component.spec.ts
@@ -1,20 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
 import { CollectionPageActions } from '@example-app/books/actions/collection-page.actions';
-import {
-  BookAuthorsComponent,
-  BookPreviewComponent,
-  BookPreviewListComponent,
-} from '@example-app/books/components';
 import { CollectionPageComponent } from '@example-app/books/containers';
 import * as fromBooks from '@example-app/books/reducers';
-import { AddCommasPipe } from '@example-app/shared/pipes/add-commas.pipe';
-import { EllipsisPipe } from '@example-app/shared/pipes/ellipsis.pipe';
-import { MaterialModule } from '@example-app/material';
 
 describe('Collection Page', () => {
   let fixture: ComponentFixture<CollectionPageComponent>;
@@ -22,16 +13,9 @@ describe('Collection Page', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, MaterialModule, RouterTestingModule],
-      declarations: [
-        CollectionPageComponent,
-        BookPreviewListComponent,
-        BookPreviewComponent,
-        BookAuthorsComponent,
-        AddCommasPipe,
-        EllipsisPipe,
-      ],
+      imports: [CollectionPageComponent],
       providers: [
+        provideNoopAnimations(),
         provideMockStore({
           selectors: [{ selector: fromBooks.selectBookCollection, value: [] }],
         }),
diff --git a/projects/example-app/src/app/books/containers/collection-page.component.ts b/projects/example-app/src/app/books/containers/collection-page.component.ts
index 48acf84839..c0e6308cfd 100644
--- a/projects/example-app/src/app/books/containers/collection-page.component.ts
+++ b/projects/example-app/src/app/books/containers/collection-page.component.ts
@@ -6,10 +6,15 @@ import { Observable } from 'rxjs';
 import { CollectionPageActions } from '@example-app/books/actions/collection-page.actions';
 import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
+import { MaterialModule } from '@example-app/material';
+import { BookPreviewListComponent } from '../components';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-collection-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MaterialModule, BookPreviewListComponent, AsyncPipe],
   template: `
     <mat-card>
       <mat-card-title>My Collection</mat-card-title>
diff --git a/projects/example-app/src/app/books/containers/find-book-page.component.spec.ts b/projects/example-app/src/app/books/containers/find-book-page.component.spec.ts
index 719d1a31ae..0811c8ba76 100644
--- a/projects/example-app/src/app/books/containers/find-book-page.component.spec.ts
+++ b/projects/example-app/src/app/books/containers/find-book-page.component.spec.ts
@@ -1,22 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
 import { FindBookPageActions } from '@example-app/books/actions/find-book-page.actions';
-import {
-  BookAuthorsComponent,
-  BookPreviewComponent,
-  BookPreviewListComponent,
-  BookSearchComponent,
-} from '@example-app/books/components';
 import { FindBookPageComponent } from '@example-app/books/containers';
 import * as fromBooks from '@example-app/books/reducers';
-import { AddCommasPipe } from '@example-app/shared/pipes/add-commas.pipe';
-import { EllipsisPipe } from '@example-app/shared/pipes/ellipsis.pipe';
-import { MaterialModule } from '@example-app/material';
 
 describe('Find Book Page', () => {
   let fixture: ComponentFixture<FindBookPageComponent>;
@@ -25,22 +14,9 @@ describe('Find Book Page', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        NoopAnimationsModule,
-        RouterTestingModule,
-        MaterialModule,
-        ReactiveFormsModule,
-      ],
-      declarations: [
-        FindBookPageComponent,
-        BookSearchComponent,
-        BookPreviewComponent,
-        BookPreviewListComponent,
-        BookAuthorsComponent,
-        AddCommasPipe,
-        EllipsisPipe,
-      ],
+      imports: [FindBookPageComponent],
       providers: [
+        provideNoopAnimations(),
         provideMockStore({
           selectors: [
             { selector: fromBooks.selectSearchQuery, value: '' },
diff --git a/projects/example-app/src/app/books/containers/find-book-page.component.ts b/projects/example-app/src/app/books/containers/find-book-page.component.ts
index 254727e58f..86ba1f132b 100644
--- a/projects/example-app/src/app/books/containers/find-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/find-book-page.component.ts
@@ -7,10 +7,14 @@ import { take } from 'rxjs/operators';
 import { FindBookPageActions } from '@example-app/books/actions/find-book-page.actions';
 import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
+import { BookPreviewListComponent, BookSearchComponent } from '../components';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-find-book-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BookSearchComponent, AsyncPipe, BookPreviewListComponent],
   template: `
     <bc-book-search
       [query]="(searchQuery$ | async)!"
diff --git a/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts b/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts
index d3392db849..a5c93a5232 100644
--- a/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts
+++ b/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts
@@ -1,17 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
 import { SelectedBookPageActions } from '@example-app/books/actions/selected-book-page.actions';
-import {
-  BookAuthorsComponent,
-  BookDetailComponent,
-} from '@example-app/books/components';
+
 import { SelectedBookPageComponent } from '@example-app/books/containers';
 import { Book, generateMockBook } from '@example-app/books/models';
-import { AddCommasPipe } from '@example-app/shared/pipes/add-commas.pipe';
-import { MaterialModule } from '@example-app/material';
 
 describe('Selected Book Page', () => {
   let fixture: ComponentFixture<SelectedBookPageComponent>;
@@ -20,14 +15,8 @@ describe('Selected Book Page', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, MaterialModule],
-      declarations: [
-        SelectedBookPageComponent,
-        BookDetailComponent,
-        BookAuthorsComponent,
-        AddCommasPipe,
-      ],
-      providers: [provideMockStore()],
+      imports: [SelectedBookPageComponent],
+      providers: [provideNoopAnimations(), provideMockStore()],
     });
 
     fixture = TestBed.createComponent(SelectedBookPageComponent);
diff --git a/projects/example-app/src/app/books/containers/selected-book-page.component.ts b/projects/example-app/src/app/books/containers/selected-book-page.component.ts
index 292666869b..e16ba31976 100644
--- a/projects/example-app/src/app/books/containers/selected-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/selected-book-page.component.ts
@@ -6,10 +6,14 @@ import { Observable } from 'rxjs';
 import { SelectedBookPageActions } from '@example-app/books/actions/selected-book-page.actions';
 import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
+import { BookDetailComponent } from '../components';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-selected-book-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BookDetailComponent, AsyncPipe],
   template: `
     <bc-book-detail
       [book]="(book$ | async)!"
diff --git a/projects/example-app/src/app/books/containers/view-book-page.component.spec.ts b/projects/example-app/src/app/books/containers/view-book-page.component.spec.ts
index b726b78e84..e1ace22b50 100644
--- a/projects/example-app/src/app/books/containers/view-book-page.component.spec.ts
+++ b/projects/example-app/src/app/books/containers/view-book-page.component.spec.ts
@@ -4,15 +4,8 @@ import { ActivatedRoute } from '@angular/router';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { BehaviorSubject } from 'rxjs';
 
-import {
-  BookAuthorsComponent,
-  BookDetailComponent,
-} from '@example-app/books/components';
-import { SelectedBookPageComponent } from '@example-app/books/containers';
 import { ViewBookPageComponent } from '@example-app/books/containers';
 import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.actions';
-import { AddCommasPipe } from '@example-app/shared/pipes/add-commas.pipe';
-import { MaterialModule } from '@example-app/material';
 
 describe('View Book Page', () => {
   let fixture: ComponentFixture<ViewBookPageComponent>;
@@ -21,7 +14,7 @@ describe('View Book Page', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
+      imports: [ViewBookPageComponent],
       providers: [
         {
           provide: ActivatedRoute,
@@ -29,13 +22,6 @@ describe('View Book Page', () => {
         },
         provideMockStore(),
       ],
-      declarations: [
-        ViewBookPageComponent,
-        SelectedBookPageComponent,
-        BookDetailComponent,
-        BookAuthorsComponent,
-        AddCommasPipe,
-      ],
     });
 
     fixture = TestBed.createComponent(ViewBookPageComponent);
diff --git a/projects/example-app/src/app/books/containers/view-book-page.component.ts b/projects/example-app/src/app/books/containers/view-book-page.component.ts
index f4bf63b54c..a6295f1860 100644
--- a/projects/example-app/src/app/books/containers/view-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/view-book-page.component.ts
@@ -5,6 +5,7 @@ import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.actions';
+import { SelectedBookPageComponent } from './selected-book-page.component';
 
 /**
  * Note: Container components are also reusable. Whether or not
@@ -17,8 +18,10 @@ import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.a
  * SelectedBookPageComponent
  */
 @Component({
+  standalone: true,
   selector: 'bc-view-book-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SelectedBookPageComponent],
   template: ` <bc-selected-book-page></bc-selected-book-page> `,
 })
 export class ViewBookPageComponent implements OnDestroy {
diff --git a/projects/example-app/src/app/core/components/layout.component.ts b/projects/example-app/src/app/core/components/layout.component.ts
index 0975f50bd0..8510b0f925 100644
--- a/projects/example-app/src/app/core/components/layout.component.ts
+++ b/projects/example-app/src/app/core/components/layout.component.ts
@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-layout',
+  imports: [MaterialModule],
   template: `
     <mat-sidenav-container fullscreen>
       <ng-content></ng-content>
diff --git a/projects/example-app/src/app/core/components/nav-item.component.ts b/projects/example-app/src/app/core/components/nav-item.component.ts
index 535d744b94..28e8753929 100644
--- a/projects/example-app/src/app/core/components/nav-item.component.ts
+++ b/projects/example-app/src/app/core/components/nav-item.component.ts
@@ -1,7 +1,12 @@
+import { NgIf } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-nav-item',
+  imports: [MaterialModule, RouterLink, NgIf],
   template: `
     <a mat-list-item [routerLink]="routerLink" (click)="navigate.emit()">
       <mat-icon matListItemIcon>{{ icon }}</mat-icon>
diff --git a/projects/example-app/src/app/core/components/sidenav.component.ts b/projects/example-app/src/app/core/components/sidenav.component.ts
index a9f4c1c103..702433fff2 100644
--- a/projects/example-app/src/app/core/components/sidenav.component.ts
+++ b/projects/example-app/src/app/core/components/sidenav.component.ts
@@ -1,7 +1,10 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-sidenav',
+  imports: [MaterialModule],
   template: `
     <mat-sidenav
       #sidenav
diff --git a/projects/example-app/src/app/core/components/toolbar.component.ts b/projects/example-app/src/app/core/components/toolbar.component.ts
index 86f22f6e47..d69fd96564 100644
--- a/projects/example-app/src/app/core/components/toolbar.component.ts
+++ b/projects/example-app/src/app/core/components/toolbar.component.ts
@@ -1,7 +1,10 @@
 import { Component, Output, EventEmitter } from '@angular/core';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-toolbar',
+  imports: [MaterialModule],
   template: `
     <mat-toolbar color="primary">
       <button mat-icon-button (click)="openMenu.emit()" aria-label="menu">
diff --git a/projects/example-app/src/app/core/containers/app.component.ts b/projects/example-app/src/app/core/containers/app.component.ts
index 46a26eb8f0..ec3268f364 100644
--- a/projects/example-app/src/app/core/containers/app.component.ts
+++ b/projects/example-app/src/app/core/containers/app.component.ts
@@ -6,10 +6,29 @@ import { AuthActions } from '@example-app/auth/actions/auth.actions';
 import * as fromAuth from '@example-app/auth/reducers';
 import * as fromRoot from '@example-app/reducers';
 import { LayoutActions } from '@example-app/core/actions/layout.actions';
+import {
+  LayoutComponent,
+  NavItemComponent,
+  SidenavComponent,
+  ToolbarComponent,
+} from '../components';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { AsyncPipe, NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
   selector: 'bc-app',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterOutlet,
+    NgIf,
+    AsyncPipe,
+    RouterLink,
+    LayoutComponent,
+    SidenavComponent,
+    NavItemComponent,
+    ToolbarComponent,
+  ],
   template: `
     <bc-layout>
       <bc-sidenav [open]="(showSidenav$ | async)!" (closeMenu)="closeSidenav()">
diff --git a/projects/example-app/src/app/core/containers/not-found-page.component.ts b/projects/example-app/src/app/core/containers/not-found-page.component.ts
index fb61d30cf5..79e0d34b45 100644
--- a/projects/example-app/src/app/core/containers/not-found-page.component.ts
+++ b/projects/example-app/src/app/core/containers/not-found-page.component.ts
@@ -1,8 +1,12 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MaterialModule } from '@example-app/material';
 
 @Component({
+  standalone: true,
   selector: 'bc-not-found-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MaterialModule, RouterLink],
   template: `
     <mat-card>
       <mat-card-title>404: Not Found</mat-card-title>
diff --git a/projects/example-app/src/app/core/core.module.ts b/projects/example-app/src/app/core/core.module.ts
deleted file mode 100644
index 546403a618..0000000000
--- a/projects/example-app/src/app/core/core.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-
-import { MaterialModule } from '@example-app/material';
-import {
-  LayoutComponent,
-  NavItemComponent,
-  SidenavComponent,
-  ToolbarComponent,
-} from '@example-app/core/components';
-import {
-  AppComponent,
-  NotFoundPageComponent,
-} from '@example-app/core/containers';
-
-export const COMPONENTS = [
-  AppComponent,
-  NotFoundPageComponent,
-  LayoutComponent,
-  NavItemComponent,
-  SidenavComponent,
-  ToolbarComponent,
-];
-
-@NgModule({
-  imports: [CommonModule, RouterModule, MaterialModule],
-  declarations: COMPONENTS,
-  exports: COMPONENTS,
-})
-export class CoreModule {}
diff --git a/projects/example-app/src/app/core/index.ts b/projects/example-app/src/app/core/index.ts
deleted file mode 100644
index a30d0c7161..0000000000
--- a/projects/example-app/src/app/core/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './core.module';
diff --git a/projects/example-app/src/app/material/material.module.ts b/projects/example-app/src/app/material/material.module.ts
index 734b31afb3..bf569067a6 100644
--- a/projects/example-app/src/app/material/material.module.ts
+++ b/projects/example-app/src/app/material/material.module.ts
@@ -1,5 +1,3 @@
-import { NgModule } from '@angular/core';
-
 import { MatInputModule } from '@angular/material/input';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
@@ -10,28 +8,14 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
-@NgModule({
-  imports: [
-    MatInputModule,
-    MatCardModule,
-    MatButtonModule,
-    MatSidenavModule,
-    MatListModule,
-    MatIconModule,
-    MatToolbarModule,
-    MatProgressSpinnerModule,
-    MatDialogModule,
-  ],
-  exports: [
-    MatInputModule,
-    MatCardModule,
-    MatButtonModule,
-    MatSidenavModule,
-    MatListModule,
-    MatIconModule,
-    MatToolbarModule,
-    MatProgressSpinnerModule,
-    MatDialogModule,
-  ],
-})
-export class MaterialModule {}
+export const MaterialModule = [
+  MatInputModule,
+  MatCardModule,
+  MatButtonModule,
+  MatSidenavModule,
+  MatListModule,
+  MatIconModule,
+  MatToolbarModule,
+  MatProgressSpinnerModule,
+  MatDialogModule,
+];
diff --git a/projects/example-app/src/app/shared/pipes/add-commas.pipe.ts b/projects/example-app/src/app/shared/pipes/add-commas.pipe.ts
index b64b4209c0..5f7dad2a35 100644
--- a/projects/example-app/src/app/shared/pipes/add-commas.pipe.ts
+++ b/projects/example-app/src/app/shared/pipes/add-commas.pipe.ts
@@ -1,6 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({ name: 'bcAddCommas' })
+@Pipe({
+  standalone: true,
+  name: 'bcAddCommas',
+})
 export class AddCommasPipe implements PipeTransform {
   transform(authors: null | string[]) {
     if (!authors) {
diff --git a/projects/example-app/src/app/shared/pipes/ellipsis.pipe.ts b/projects/example-app/src/app/shared/pipes/ellipsis.pipe.ts
index f92a414b65..cd1170f2ec 100644
--- a/projects/example-app/src/app/shared/pipes/ellipsis.pipe.ts
+++ b/projects/example-app/src/app/shared/pipes/ellipsis.pipe.ts
@@ -1,6 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({ name: 'bcEllipsis' })
+@Pipe({
+  standalone: true,
+  name: 'bcEllipsis',
+})
 export class EllipsisPipe implements PipeTransform {
   transform(str: string, strLength = 250) {
     const withoutHtml = str.replace(/(<([^>]+)>)/gi, '');
diff --git a/projects/example-app/src/main.ts b/projects/example-app/src/main.ts
index 1d91a20a57..6a1ec69979 100644
--- a/projects/example-app/src/main.ts
+++ b/projects/example-app/src/main.ts
@@ -1,6 +1,5 @@
-import './polyfills';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/core/containers/app.component';
+import { appConfig } from './app/app.config';
 
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
+bootstrapApplication(AppComponent, appConfig);

From 7ce0ef3a3a1f1f7e922a94c1266f6b3121bcbc89 Mon Sep 17 00:00:00 2001
From: Rainer Hahnekamp <rainer.hahnekamp@gmail.com>
Date: Wed, 14 Aug 2024 16:52:38 +0200
Subject: [PATCH 02/10] docs: switch to esbuild and sync project.json with
 latest one

---
 projects/example-app/project.json | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/projects/example-app/project.json b/projects/example-app/project.json
index 9a194298aa..bba5104512 100644
--- a/projects/example-app/project.json
+++ b/projects/example-app/project.json
@@ -7,12 +7,12 @@
   "generators": {},
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser",
+      "executor": "@angular-devkit/build-angular:application",
       "options": {
         "outputPath": "dist/projects/example-app",
         "index": "projects/example-app/src/index.html",
-        "main": "projects/example-app/src/main.ts",
-        "polyfills": "projects/example-app/src/polyfills.ts",
+        "browser": "projects/example-app/src/main.ts",
+        "polyfills": ["zone.js"],
         "tsConfig": "projects/example-app/tsconfig.app.json",
         "assets": [
           "projects/example-app/src/favicon.ico",
@@ -24,20 +24,23 @@
       "configurations": {
         "production": {
           "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
             {
               "type": "anyComponentStyle",
-              "maximumWarning": "6kb"
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
             }
           ],
           "outputHashing": "all"
         },
         "development": {
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
-          "sourceMap": true,
-          "namedChunks": true
+          "sourceMap": true
         }
       },
       "defaultConfiguration": "production",

From b06c9204987c966defc060b6c0f4e69ab7892ee3 Mon Sep 17 00:00:00 2001
From: Rainer Hahnekamp <rainer.hahnekamp@gmail.com>
Date: Mon, 16 Sep 2024 00:03:04 +0200
Subject: [PATCH 03/10] docs: move to createFeature

---
 projects/example-app/src/app/app.config.ts    | 28 +++++----
 .../src/app/auth/reducers/auth.reducer.ts     | 19 +++---
 .../src/app/auth/reducers/index.ts            | 63 +++++--------------
 .../app/auth/reducers/login-page.reducer.ts   | 46 +++++++-------
 .../src/app/core/containers/app.component.ts  |  3 +-
 .../src/app/core/reducers/layout.reducer.ts   | 28 ++++++---
 .../example-app/src/app/reducers/index.ts     | 15 -----
 .../src/app/app.component.spec.ts             | 11 +++-
 .../standalone-app/src/app/app.effects.ts     |  6 +-
 9 files changed, 94 insertions(+), 125 deletions(-)

diff --git a/projects/example-app/src/app/app.config.ts b/projects/example-app/src/app/app.config.ts
index ea8ea569c0..092037f64c 100644
--- a/projects/example-app/src/app/app.config.ts
+++ b/projects/example-app/src/app/app.config.ts
@@ -2,7 +2,7 @@ import { ApplicationConfig } from '@angular/core';
 import { provideHttpClient } from '@angular/common/http';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
-import { provideState, provideStore } from '@ngrx/store';
+import { provideStore } from '@ngrx/store';
 import { provideEffects } from '@ngrx/effects';
 import { provideRouterStore } from '@ngrx/router-store';
 import { provideStoreDevtools } from '@ngrx/store-devtools';
@@ -12,8 +12,9 @@ import { rootReducers, metaReducers } from '@example-app/reducers';
 import { APP_ROUTES } from '@example-app/app.routing';
 import { UserEffects, RouterEffects } from '@example-app/core/effects';
 import { provideRouter, withHashLocation } from '@angular/router';
-import * as fromAuth from '@example-app/auth/reducers';
 import { AuthEffects } from './auth/effects';
+import { provideAuth } from '@example-app/auth/reducers';
+import { provideLayout } from '@example-app/core/reducers/layout.reducer';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -39,6 +40,20 @@ export const appConfig: ApplicationConfig = {
       },
     }),
 
+    /**
+     * The layout feature manages the visibility of the sidenav.
+     */
+    provideLayout(),
+
+    /**
+     * The Auth state is provided here to ensure that the login details
+     * are available as soon as the application starts.
+     *
+     * It could also be part of the `rootReducers`, but is separated
+     * because of demonstration purposes.
+     */
+    provideAuth(),
+
     /**
      * @ngrx/router-store keeps router state up-to-date in the store.
      */
@@ -65,14 +80,5 @@ export const appConfig: ApplicationConfig = {
      * so they are initialized when the application starts.
      */
     provideEffects(UserEffects, RouterEffects, AuthEffects),
-
-    /**
-     * The Auth state is provided here to ensure that the login details
-     * are available as soon as the application starts.
-     */
-    provideState({
-      name: fromAuth.authFeatureKey,
-      reducer: fromAuth.reducers,
-    }),
   ],
 };
diff --git a/projects/example-app/src/app/auth/reducers/auth.reducer.ts b/projects/example-app/src/app/auth/reducers/auth.reducer.ts
index 19e3238e6d..e7af6b3e28 100644
--- a/projects/example-app/src/app/auth/reducers/auth.reducer.ts
+++ b/projects/example-app/src/app/auth/reducers/auth.reducer.ts
@@ -1,10 +1,8 @@
-import { createReducer, on } from '@ngrx/store';
+import { createFeature, createReducer, on } from '@ngrx/store';
 import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
 import { AuthActions } from '@example-app/auth/actions/auth.actions';
 import { User } from '@example-app/auth/models';
 
-export const statusFeatureKey = 'status';
-
 export interface State {
   user: User | null;
 }
@@ -13,10 +11,11 @@ export const initialState: State = {
   user: null,
 };
 
-export const reducer = createReducer(
-  initialState,
-  on(AuthApiActions.loginSuccess, (state, { user }) => ({ ...state, user })),
-  on(AuthActions.logout, () => initialState)
-);
-
-export const getUser = (state: State) => state.user;
+export const statusFeature = createFeature({
+  name: 'authStatus',
+  reducer: createReducer(
+    initialState,
+    on(AuthApiActions.loginSuccess, (state, { user }) => ({ ...state, user })),
+    on(AuthActions.logout, () => initialState)
+  ),
+});
diff --git a/projects/example-app/src/app/auth/reducers/index.ts b/projects/example-app/src/app/auth/reducers/index.ts
index 9350e27d2c..65b6c6cbb2 100644
--- a/projects/example-app/src/app/auth/reducers/index.ts
+++ b/projects/example-app/src/app/auth/reducers/index.ts
@@ -1,52 +1,19 @@
-import {
-  createSelector,
-  createFeatureSelector,
-  Action,
-  combineReducers,
-} from '@ngrx/store';
-import * as fromRoot from '@example-app/reducers';
-import * as fromAuth from '@example-app/auth/reducers/auth.reducer';
-import * as fromLoginPage from '@example-app/auth/reducers/login-page.reducer';
+import { createSelector, provideState } from '@ngrx/store';
+import { statusFeature } from './auth.reducer';
+import { loginPageFeature } from './login-page.reducer';
+import { makeEnvironmentProviders } from '@angular/core';
 
-export const authFeatureKey = 'auth';
+export const provideAuth = () =>
+  makeEnvironmentProviders([
+    provideState(statusFeature),
+    provideState(loginPageFeature),
+  ]);
 
-export interface AuthState {
-  [fromAuth.statusFeatureKey]: fromAuth.State;
-  [fromLoginPage.loginPageFeatureKey]: fromLoginPage.State;
-}
-
-export interface State extends fromRoot.State {
-  [authFeatureKey]: AuthState;
-}
-
-export function reducers(state: AuthState | undefined, action: Action) {
-  return combineReducers({
-    [fromAuth.statusFeatureKey]: fromAuth.reducer,
-    [fromLoginPage.loginPageFeatureKey]: fromLoginPage.reducer,
-  })(state, action);
-}
-
-export const selectAuthState = createFeatureSelector<AuthState>(authFeatureKey);
-
-export const selectAuthStatusState = createSelector(
-  selectAuthState,
-  (state) => state.status
-);
-export const selectUser = createSelector(
-  selectAuthStatusState,
-  fromAuth.getUser
+export const selectLoggedIn = createSelector(
+  statusFeature.selectUser,
+  (user) => !!user
 );
-export const selectLoggedIn = createSelector(selectUser, (user) => !!user);
 
-export const selectLoginPageState = createSelector(
-  selectAuthState,
-  (state) => state.loginPage
-);
-export const selectLoginPageError = createSelector(
-  selectLoginPageState,
-  fromLoginPage.getError
-);
-export const selectLoginPagePending = createSelector(
-  selectLoginPageState,
-  fromLoginPage.getPending
-);
+export const selectLoginPageError = loginPageFeature.selectError;
+
+export const selectLoginPagePending = loginPageFeature.selectPending;
diff --git a/projects/example-app/src/app/auth/reducers/login-page.reducer.ts b/projects/example-app/src/app/auth/reducers/login-page.reducer.ts
index d844c2052d..bb09c273ea 100644
--- a/projects/example-app/src/app/auth/reducers/login-page.reducer.ts
+++ b/projects/example-app/src/app/auth/reducers/login-page.reducer.ts
@@ -1,8 +1,6 @@
 import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
 import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
-import { createReducer, on } from '@ngrx/store';
-
-export const loginPageFeatureKey = 'loginPage';
+import { createFeature, createReducer, on } from '@ngrx/store';
 
 export interface State {
   error: string | null;
@@ -14,25 +12,25 @@ export const initialState: State = {
   pending: false,
 };
 
-export const reducer = createReducer(
-  initialState,
-  on(LoginPageActions.login, (state) => ({
-    ...state,
-    error: null,
-    pending: true,
-  })),
-
-  on(AuthApiActions.loginSuccess, (state) => ({
-    ...state,
-    error: null,
-    pending: false,
-  })),
-  on(AuthApiActions.loginFailure, (state, { error }) => ({
-    ...state,
-    error,
-    pending: false,
-  }))
-);
+export const loginPageFeature = createFeature({
+  name: 'authLoginPage',
+  reducer: createReducer(
+    initialState,
+    on(LoginPageActions.login, (state) => ({
+      ...state,
+      error: null,
+      pending: true,
+    })),
 
-export const getError = (state: State) => state.error;
-export const getPending = (state: State) => state.pending;
+    on(AuthApiActions.loginSuccess, (state) => ({
+      ...state,
+      error: null,
+      pending: false,
+    })),
+    on(AuthApiActions.loginFailure, (state, { error }) => ({
+      ...state,
+      error,
+      pending: false,
+    }))
+  ),
+});
diff --git a/projects/example-app/src/app/core/containers/app.component.ts b/projects/example-app/src/app/core/containers/app.component.ts
index ec3268f364..da3b2d9705 100644
--- a/projects/example-app/src/app/core/containers/app.component.ts
+++ b/projects/example-app/src/app/core/containers/app.component.ts
@@ -14,6 +14,7 @@ import {
 } from '../components';
 import { RouterLink, RouterOutlet } from '@angular/router';
 import { AsyncPipe, NgIf } from '@angular/common';
+import { selectShowSidenav } from '../reducers/layout.reducer';
 
 @Component({
   standalone: true,
@@ -75,7 +76,7 @@ export class AppComponent {
      * Selectors can be applied with the `select` operator which passes the state
      * tree to the provided selector
      */
-    this.showSidenav$ = this.store.select(fromRoot.selectShowSidenav);
+    this.showSidenav$ = this.store.select(selectShowSidenav);
     this.loggedIn$ = this.store.select(fromAuth.selectLoggedIn);
   }
 
diff --git a/projects/example-app/src/app/core/reducers/layout.reducer.ts b/projects/example-app/src/app/core/reducers/layout.reducer.ts
index 9b0a05ad7a..fa5a0ba5e6 100644
--- a/projects/example-app/src/app/core/reducers/layout.reducer.ts
+++ b/projects/example-app/src/app/core/reducers/layout.reducer.ts
@@ -1,9 +1,8 @@
-import { createReducer, on } from '@ngrx/store';
+import { createFeature, createReducer, on, provideState } from '@ngrx/store';
 
 import { LayoutActions } from '@example-app/core/actions/layout.actions';
 import { AuthActions } from '@example-app/auth/actions/auth.actions';
-
-export const layoutFeatureKey = 'layout';
+import { makeEnvironmentProviders } from '@angular/core';
 
 export interface State {
   showSidenav: boolean;
@@ -13,11 +12,20 @@ const initialState: State = {
   showSidenav: false,
 };
 
-export const reducer = createReducer(
-  initialState,
-  on(LayoutActions.closeSidenav, () => ({ showSidenav: false })),
-  on(LayoutActions.openSidenav, () => ({ showSidenav: true })),
-  on(AuthActions.logoutConfirmation, () => ({ showSidenav: false }))
-);
+const layoutFeature = createFeature({
+  name: 'layout',
+  reducer: createReducer(
+    initialState,
+    on(LayoutActions.closeSidenav, () => ({ showSidenav: false })),
+    on(LayoutActions.openSidenav, () => ({ showSidenav: true })),
+    on(AuthActions.logoutConfirmation, () => ({ showSidenav: false }))
+  ),
+});
+
+export const provideLayout = () =>
+  makeEnvironmentProviders([provideState(layoutFeature)]);
 
-export const selectShowSidenav = (state: State) => state.showSidenav;
+/**
+ * Layout Selectors
+ */
+export const selectShowSidenav = layoutFeature.selectShowSidenav;
diff --git a/projects/example-app/src/app/reducers/index.ts b/projects/example-app/src/app/reducers/index.ts
index be4e66a253..b82bd89f28 100644
--- a/projects/example-app/src/app/reducers/index.ts
+++ b/projects/example-app/src/app/reducers/index.ts
@@ -18,7 +18,6 @@ import {
  * notation packages up all of the exports into a single object.
  */
 
-import * as fromLayout from '@example-app/core/reducers/layout.reducer';
 import { isDevMode } from '@angular/core';
 
 /**
@@ -26,7 +25,6 @@ import { isDevMode } from '@angular/core';
  * our top level state interface is just a map of keys to inner state types.
  */
 export interface State {
-  [fromLayout.layoutFeatureKey]: fromLayout.State;
   router: RouterReducerState;
 }
 
@@ -36,7 +34,6 @@ export interface State {
  * and the current or initial state and return a new immutable state.
  */
 export const rootReducers: ActionReducerMap<State> = {
-  [fromLayout.layoutFeatureKey]: fromLayout.reducer,
   router: routerReducer,
 };
 
@@ -61,18 +58,6 @@ export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
  */
 export const metaReducers: MetaReducer<State>[] = isDevMode() ? [logger] : [];
 
-/**
- * Layout Selectors
- */
-export const selectLayoutState = createFeatureSelector<fromLayout.State>(
-  fromLayout.layoutFeatureKey
-);
-
-export const selectShowSidenav = createSelector(
-  selectLayoutState,
-  fromLayout.selectShowSidenav
-);
-
 /**
  * Router Selectors
  */
diff --git a/projects/standalone-app/src/app/app.component.spec.ts b/projects/standalone-app/src/app/app.component.spec.ts
index e636a11368..ced3e561c8 100644
--- a/projects/standalone-app/src/app/app.component.spec.ts
+++ b/projects/standalone-app/src/app/app.component.spec.ts
@@ -1,13 +1,18 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { RouterTestingModule } from '@angular/router/testing';
 import { provideMockStore } from '@ngrx/store/testing';
+import { provideRouter } from '@angular/router';
+import { provideLocationMocks } from '@angular/common/testing';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule, AppComponent],
-      providers: [provideMockStore()],
+      imports: [AppComponent],
+      providers: [
+        provideMockStore(),
+        provideRouter([]),
+        provideLocationMocks(),
+      ],
     }).compileComponents();
   });
 
diff --git a/projects/standalone-app/src/app/app.effects.ts b/projects/standalone-app/src/app/app.effects.ts
index db83e2bcbe..eba323c582 100644
--- a/projects/standalone-app/src/app/app.effects.ts
+++ b/projects/standalone-app/src/app/app.effects.ts
@@ -1,15 +1,15 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Actions, createEffect } from '@ngrx/effects';
 import { tap } from 'rxjs';
 
 @Injectable()
 export class AppEffects {
+  private actions$ = inject(Actions);
+
   logger$ = createEffect(
     () => {
       return this.actions$.pipe(tap((action) => console.log(action)));
     },
     { dispatch: false }
   );
-
-  constructor(private actions$: Actions) {}
 }

From 30b7471c2dc3a0cc94af69ea6d691de17a040fa3 Mon Sep 17 00:00:00 2001
From: Rainer Hahnekamp <rainer.hahnekamp@gmail.com>
Date: Mon, 16 Sep 2024 00:34:21 +0200
Subject: [PATCH 04/10] docs: fix tests

---
 .../login-form.component.spec.ts.snap         | 394 +++++++++++++++---
 .../login-page.component.spec.ts.snap         |   6 +-
 .../app/auth/reducers/auth.reducer.spec.ts    |   8 +-
 .../auth/reducers/login-page.reducer.spec.ts  |  19 +-
 .../auth/services/auth-guard.service.spec.ts  |   7 +-
 .../collection-page.component.spec.ts.snap    |   4 +-
 .../find-book-page.component.spec.ts.snap     |  10 +-
 .../selected-book-page.component.spec.ts.snap |   6 +-
 8 files changed, 366 insertions(+), 88 deletions(-)

diff --git a/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap b/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
index 061d31df28..b6f29bfbe1 100644
--- a/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
+++ b/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
@@ -5,45 +5,137 @@ exports[`Login Page should compile 1`] = `
   form={[Function FormGroup]}
   submitted={[Function EventEmitter_]}
 >
-  <mat-card>
-    <mat-card-title>
+  <mat-card
+    class="mat-mdc-card mdc-card"
+  >
+    <mat-card-title
+      class="mat-mdc-card-title"
+    >
       Login
     </mat-card-title>
-    <mat-card-content>
+    <mat-card-content
+      class="mat-mdc-card-content"
+    >
       <form
         class="ng-untouched ng-pristine ng-valid"
         novalidate=""
       >
         <p>
-          <mat-form-field>
-            <input
-              class="ng-untouched ng-pristine ng-valid"
-              formcontrolname="username"
-              matinput=""
-              placeholder="Username"
-              type="text"
-            />
+          <mat-form-field
+            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine ng-valid"
+          >
+            <div
+              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label"
+            >
+              <div
+                class="mat-mdc-form-field-focus-overlay"
+              />
+              <div
+                class="mat-mdc-form-field-flex"
+              >
+                <div
+                  class="mat-mdc-form-field-infix"
+                >
+                  <input
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
+                    formcontrolname="username"
+                    matinput=""
+                    placeholder="Username"
+                    type="text"
+                  />
+                </div>
+              </div>
+              <div
+                class="mdc-line-ripple mdc-line-ripple--deactivating"
+                matformfieldlineripple=""
+              />
+            </div>
+            <div
+              class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
+            >
+              <div
+                class="mat-mdc-form-field-hint-wrapper ng-trigger ng-trigger-transitionMessages"
+                style="opacity: 1; transform: translateY(0%);"
+              >
+                <div
+                  class="mat-mdc-form-field-hint-spacer"
+                />
+              </div>
+            </div>
           </mat-form-field>
         </p>
         <p>
-          <mat-form-field>
-            <input
-              class="ng-untouched ng-pristine ng-valid"
-              formcontrolname="password"
-              matinput=""
-              placeholder="Password"
-              type="password"
-            />
+          <mat-form-field
+            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine ng-valid"
+          >
+            <div
+              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label"
+            >
+              <div
+                class="mat-mdc-form-field-focus-overlay"
+              />
+              <div
+                class="mat-mdc-form-field-flex"
+              >
+                <div
+                  class="mat-mdc-form-field-infix"
+                >
+                  <input
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
+                    formcontrolname="password"
+                    matinput=""
+                    placeholder="Password"
+                    type="password"
+                  />
+                </div>
+              </div>
+              <div
+                class="mdc-line-ripple mdc-line-ripple--deactivating"
+                matformfieldlineripple=""
+              />
+            </div>
+            <div
+              class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
+            >
+              <div
+                class="mat-mdc-form-field-hint-wrapper ng-trigger ng-trigger-transitionMessages"
+                style="opacity: 1; transform: translateY(0%);"
+              >
+                <div
+                  class="mat-mdc-form-field-hint-spacer"
+                />
+              </div>
+            </div>
           </mat-form-field>
         </p>
         <div
           class="login-buttons"
         >
           <button
+            class="mdc-button mat-mdc-button _mat-animation-noopable mat-unthemed mat-mdc-button-base"
             mat-button=""
+            mat-ripple-loader-class-name="mat-mdc-button-ripple"
+            mat-ripple-loader-uninitialized=""
             type="submit"
           >
-            Login
+            <span
+              class="mat-mdc-button-persistent-ripple mdc-button__ripple"
+            />
+            <span
+              class="mdc-button__label"
+            >
+              Login
+            </span>
+            <span
+              class="mat-mdc-focus-indicator"
+            />
+            <span
+              class="mat-mdc-button-touch-target"
+            />
           </button>
         </div>
       </form>
@@ -57,47 +149,133 @@ exports[`Login Page should disable the form if pending 1`] = `
   form={[Function FormGroup]}
   submitted={[Function EventEmitter_]}
 >
-  <mat-card>
-    <mat-card-title>
+  <mat-card
+    class="mat-mdc-card mdc-card"
+  >
+    <mat-card-title
+      class="mat-mdc-card-title"
+    >
       Login
     </mat-card-title>
-    <mat-card-content>
+    <mat-card-content
+      class="mat-mdc-card-content"
+    >
       <form
         class="ng-untouched ng-pristine"
         novalidate=""
       >
         <p>
-          <mat-form-field>
-            <input
-              class="ng-untouched ng-pristine"
-              disabled=""
-              formcontrolname="username"
-              matinput=""
-              placeholder="Username"
-              type="text"
-            />
+          <mat-form-field
+            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-disabled mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine"
+          >
+            <div
+              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label mdc-text-field--disabled"
+            >
+              <div
+                class="mat-mdc-form-field-flex"
+              >
+                <div
+                  class="mat-mdc-form-field-infix"
+                >
+                  <input
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine cdk-text-field-autofill-monitored"
+                    disabled=""
+                    formcontrolname="username"
+                    matinput=""
+                    placeholder="Username"
+                    type="text"
+                  />
+                </div>
+              </div>
+              <div
+                class="mdc-line-ripple mdc-line-ripple--deactivating"
+                matformfieldlineripple=""
+              />
+            </div>
+            <div
+              class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
+            >
+              <div
+                class="mat-mdc-form-field-hint-wrapper ng-trigger ng-trigger-transitionMessages"
+                style="opacity: 1; transform: translateY(0%);"
+              >
+                <div
+                  class="mat-mdc-form-field-hint-spacer"
+                />
+              </div>
+            </div>
           </mat-form-field>
         </p>
         <p>
-          <mat-form-field>
-            <input
-              class="ng-untouched ng-pristine"
-              disabled=""
-              formcontrolname="password"
-              matinput=""
-              placeholder="Password"
-              type="password"
-            />
+          <mat-form-field
+            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-disabled mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine"
+          >
+            <div
+              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label mdc-text-field--disabled"
+            >
+              <div
+                class="mat-mdc-form-field-flex"
+              >
+                <div
+                  class="mat-mdc-form-field-infix"
+                >
+                  <input
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine cdk-text-field-autofill-monitored"
+                    disabled=""
+                    formcontrolname="password"
+                    matinput=""
+                    placeholder="Password"
+                    type="password"
+                  />
+                </div>
+              </div>
+              <div
+                class="mdc-line-ripple mdc-line-ripple--deactivating"
+                matformfieldlineripple=""
+              />
+            </div>
+            <div
+              class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
+            >
+              <div
+                class="mat-mdc-form-field-hint-wrapper ng-trigger ng-trigger-transitionMessages"
+                style="opacity: 1; transform: translateY(0%);"
+              >
+                <div
+                  class="mat-mdc-form-field-hint-spacer"
+                />
+              </div>
+            </div>
           </mat-form-field>
         </p>
         <div
           class="login-buttons"
         >
           <button
+            class="mdc-button mat-mdc-button _mat-animation-noopable mat-unthemed mat-mdc-button-base"
             mat-button=""
+            mat-ripple-loader-class-name="mat-mdc-button-ripple"
+            mat-ripple-loader-uninitialized=""
             type="submit"
           >
-            Login
+            <span
+              class="mat-mdc-button-persistent-ripple mdc-button__ripple"
+            />
+            <span
+              class="mdc-button__label"
+            >
+              Login
+            </span>
+            <span
+              class="mat-mdc-focus-indicator"
+            />
+            <span
+              class="mat-mdc-button-touch-target"
+            />
           </button>
         </div>
       </form>
@@ -112,35 +290,111 @@ exports[`Login Page should display an error message if provided 1`] = `
   form={[Function FormGroup]}
   submitted={[Function EventEmitter_]}
 >
-  <mat-card>
-    <mat-card-title>
+  <mat-card
+    class="mat-mdc-card mdc-card"
+  >
+    <mat-card-title
+      class="mat-mdc-card-title"
+    >
       Login
     </mat-card-title>
-    <mat-card-content>
+    <mat-card-content
+      class="mat-mdc-card-content"
+    >
       <form
         class="ng-untouched ng-pristine ng-valid"
         novalidate=""
       >
         <p>
-          <mat-form-field>
-            <input
-              class="ng-untouched ng-pristine ng-valid"
-              formcontrolname="username"
-              matinput=""
-              placeholder="Username"
-              type="text"
-            />
+          <mat-form-field
+            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine ng-valid"
+          >
+            <div
+              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label"
+            >
+              <div
+                class="mat-mdc-form-field-focus-overlay"
+              />
+              <div
+                class="mat-mdc-form-field-flex"
+              >
+                <div
+                  class="mat-mdc-form-field-infix"
+                >
+                  <input
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
+                    formcontrolname="username"
+                    matinput=""
+                    placeholder="Username"
+                    type="text"
+                  />
+                </div>
+              </div>
+              <div
+                class="mdc-line-ripple mdc-line-ripple--deactivating"
+                matformfieldlineripple=""
+              />
+            </div>
+            <div
+              class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
+            >
+              <div
+                class="mat-mdc-form-field-hint-wrapper ng-trigger ng-trigger-transitionMessages"
+                style="opacity: 1; transform: translateY(0%);"
+              >
+                <div
+                  class="mat-mdc-form-field-hint-spacer"
+                />
+              </div>
+            </div>
           </mat-form-field>
         </p>
         <p>
-          <mat-form-field>
-            <input
-              class="ng-untouched ng-pristine ng-valid"
-              formcontrolname="password"
-              matinput=""
-              placeholder="Password"
-              type="password"
-            />
+          <mat-form-field
+            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine ng-valid"
+          >
+            <div
+              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label"
+            >
+              <div
+                class="mat-mdc-form-field-focus-overlay"
+              />
+              <div
+                class="mat-mdc-form-field-flex"
+              >
+                <div
+                  class="mat-mdc-form-field-infix"
+                >
+                  <input
+                    aria-invalid="false"
+                    aria-required="false"
+                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
+                    formcontrolname="password"
+                    matinput=""
+                    placeholder="Password"
+                    type="password"
+                  />
+                </div>
+              </div>
+              <div
+                class="mdc-line-ripple mdc-line-ripple--deactivating"
+                matformfieldlineripple=""
+              />
+            </div>
+            <div
+              class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
+            >
+              <div
+                class="mat-mdc-form-field-hint-wrapper ng-trigger ng-trigger-transitionMessages"
+                style="opacity: 1; transform: translateY(0%);"
+              >
+                <div
+                  class="mat-mdc-form-field-hint-spacer"
+                />
+              </div>
+            </div>
           </mat-form-field>
         </p>
         <p
@@ -152,10 +406,26 @@ exports[`Login Page should display an error message if provided 1`] = `
           class="login-buttons"
         >
           <button
+            class="mdc-button mat-mdc-button _mat-animation-noopable mat-unthemed mat-mdc-button-base"
             mat-button=""
+            mat-ripple-loader-class-name="mat-mdc-button-ripple"
+            mat-ripple-loader-uninitialized=""
             type="submit"
           >
-            Login
+            <span
+              class="mat-mdc-button-persistent-ripple mdc-button__ripple"
+            />
+            <span
+              class="mdc-button__label"
+            >
+              Login
+            </span>
+            <span
+              class="mat-mdc-focus-indicator"
+            />
+            <span
+              class="mat-mdc-button-touch-target"
+            />
           </button>
         </div>
       </form>
diff --git a/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap b/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
index dcfc5b501c..b90481a4b3 100644
--- a/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
+++ b/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
@@ -2,9 +2,9 @@
 
 exports[`Login Page should compile 1`] = `
 <bc-login-page
-  error$={[Function Store]}
-  pending$={[Function Store]}
-  store={[Function MockStore]}
+  error$={[Function _Store]}
+  pending$={[Function _Store]}
+  store={[Function _MockStore]}
 >
   <bc-login-form>
     <mat-card
diff --git a/projects/example-app/src/app/auth/reducers/auth.reducer.spec.ts b/projects/example-app/src/app/auth/reducers/auth.reducer.spec.ts
index 4aa7653c12..03d582e2a0 100644
--- a/projects/example-app/src/app/auth/reducers/auth.reducer.spec.ts
+++ b/projects/example-app/src/app/auth/reducers/auth.reducer.spec.ts
@@ -1,4 +1,4 @@
-import { reducer } from '@example-app/auth/reducers/auth.reducer';
+import { statusFeature } from '@example-app/auth/reducers/auth.reducer';
 import * as fromAuth from '@example-app/auth/reducers/auth.reducer';
 import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
 import { AuthActions } from '@example-app/auth/actions/auth.actions';
@@ -10,7 +10,7 @@ describe('AuthReducer', () => {
     it('should return the default state', () => {
       const action = {} as any;
 
-      const result = reducer(undefined, action);
+      const result = statusFeature.reducer(undefined, action);
 
       /**
        * Snapshot tests are a quick way to validate
@@ -28,7 +28,7 @@ describe('AuthReducer', () => {
       const user = { name: 'test' } as User;
       const createAction = AuthApiActions.loginSuccess({ user });
 
-      const result = reducer(fromAuth.initialState, createAction);
+      const result = statusFeature.reducer(fromAuth.initialState, createAction);
 
       expect(result).toMatchSnapshot();
     });
@@ -41,7 +41,7 @@ describe('AuthReducer', () => {
       } as fromAuth.State;
       const createAction = AuthActions.logout();
 
-      const result = reducer(initialState, createAction);
+      const result = statusFeature.reducer(initialState, createAction);
 
       expect(result).toMatchSnapshot();
     });
diff --git a/projects/example-app/src/app/auth/reducers/login-page.reducer.spec.ts b/projects/example-app/src/app/auth/reducers/login-page.reducer.spec.ts
index 781008a3f1..7f856a77d8 100644
--- a/projects/example-app/src/app/auth/reducers/login-page.reducer.spec.ts
+++ b/projects/example-app/src/app/auth/reducers/login-page.reducer.spec.ts
@@ -1,17 +1,17 @@
-import { reducer } from '@example-app/auth/reducers/login-page.reducer';
 import * as fromLoginPage from '@example-app/auth/reducers/login-page.reducer';
 
 import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
 import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
 
 import { Credentials, User } from '@example-app/auth/models';
+import { loginPageFeature } from '@example-app/auth/reducers/login-page.reducer';
 
 describe('LoginPageReducer', () => {
   describe('undefined action', () => {
     it('should return the default state', () => {
       const action = {} as any;
 
-      const result = reducer(undefined, action);
+      const result = loginPageFeature.reducer(undefined, action);
 
       expect(result).toMatchSnapshot();
     });
@@ -22,7 +22,10 @@ describe('LoginPageReducer', () => {
       const user = { username: 'test' } as Credentials;
       const createAction = LoginPageActions.login({ credentials: user });
 
-      const result = reducer(fromLoginPage.initialState, createAction);
+      const result = loginPageFeature.reducer(
+        fromLoginPage.initialState,
+        createAction
+      );
 
       expect(result).toMatchSnapshot();
     });
@@ -33,7 +36,10 @@ describe('LoginPageReducer', () => {
       const user = { name: 'test' } as User;
       const createAction = AuthApiActions.loginSuccess({ user });
 
-      const result = reducer(fromLoginPage.initialState, createAction);
+      const result = loginPageFeature.reducer(
+        fromLoginPage.initialState,
+        createAction
+      );
 
       expect(result).toMatchSnapshot();
     });
@@ -44,7 +50,10 @@ describe('LoginPageReducer', () => {
       const error = 'login failed';
       const createAction = AuthApiActions.loginFailure({ error });
 
-      const result = reducer(fromLoginPage.initialState, createAction);
+      const result = loginPageFeature.reducer(
+        fromLoginPage.initialState,
+        createAction
+      );
 
       expect(result).toMatchSnapshot();
     });
diff --git a/projects/example-app/src/app/auth/services/auth-guard.service.spec.ts b/projects/example-app/src/app/auth/services/auth-guard.service.spec.ts
index e97451e90b..508e6c2639 100644
--- a/projects/example-app/src/app/auth/services/auth-guard.service.spec.ts
+++ b/projects/example-app/src/app/auth/services/auth-guard.service.spec.ts
@@ -1,15 +1,14 @@
 import { TestBed } from '@angular/core/testing';
-import { MemoizedSelector } from '@ngrx/store';
 import { cold } from 'jasmine-marbles';
 import { authGuard } from '@example-app/auth/services';
-import * as fromAuth from '@example-app/auth/reducers';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { Observable } from 'rxjs';
+import { selectLoggedIn } from '@example-app/auth/reducers';
 
 describe('Auth Guard', () => {
   let guard: Observable<boolean>;
   let store: MockStore;
-  let loggedIn: MemoizedSelector<fromAuth.State, boolean>;
+  let loggedIn: typeof selectLoggedIn;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -18,7 +17,7 @@ describe('Auth Guard', () => {
 
     store = TestBed.inject(MockStore);
     guard = TestBed.runInInjectionContext(authGuard);
-    loggedIn = store.overrideSelector(fromAuth.selectLoggedIn, false);
+    loggedIn = store.overrideSelector(selectLoggedIn, false);
   });
 
   it('should return false if the user state is not logged in', () => {
diff --git a/projects/example-app/src/app/books/containers/__snapshots__/collection-page.component.spec.ts.snap b/projects/example-app/src/app/books/containers/__snapshots__/collection-page.component.spec.ts.snap
index dd31673d71..c675f5ac0b 100644
--- a/projects/example-app/src/app/books/containers/__snapshots__/collection-page.component.spec.ts.snap
+++ b/projects/example-app/src/app/books/containers/__snapshots__/collection-page.component.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`Collection Page should compile 1`] = `
 <bc-collection-page
-  books$={[Function Store]}
-  store={[Function MockStore]}
+  books$={[Function _Store]}
+  store={[Function _MockStore]}
 >
   <mat-card
     class="mat-mdc-card mdc-card"
diff --git a/projects/example-app/src/app/books/containers/__snapshots__/find-book-page.component.spec.ts.snap b/projects/example-app/src/app/books/containers/__snapshots__/find-book-page.component.spec.ts.snap
index 0b59de7212..39bfecfa64 100644
--- a/projects/example-app/src/app/books/containers/__snapshots__/find-book-page.component.spec.ts.snap
+++ b/projects/example-app/src/app/books/containers/__snapshots__/find-book-page.component.spec.ts.snap
@@ -2,11 +2,11 @@
 
 exports[`Find Book Page should compile 1`] = `
 <bc-find-book-page
-  books$={[Function Store]}
-  error$={[Function Store]}
-  loading$={[Function Store]}
-  searchQuery$={[Function Store]}
-  store={[Function MockStore]}
+  books$={[Function _Store]}
+  error$={[Function _Store]}
+  loading$={[Function _Store]}
+  searchQuery$={[Function _Store]}
+  store={[Function _MockStore]}
 >
   <bc-book-search>
     <mat-card
diff --git a/projects/example-app/src/app/books/containers/__snapshots__/selected-book-page.component.spec.ts.snap b/projects/example-app/src/app/books/containers/__snapshots__/selected-book-page.component.spec.ts.snap
index 0fa773722c..f7d29a2ef5 100644
--- a/projects/example-app/src/app/books/containers/__snapshots__/selected-book-page.component.spec.ts.snap
+++ b/projects/example-app/src/app/books/containers/__snapshots__/selected-book-page.component.spec.ts.snap
@@ -2,9 +2,9 @@
 
 exports[`Selected Book Page should compile 1`] = `
 <bc-selected-book-page
-  book$={[Function Store]}
-  isSelectedBookInCollection$={[Function Store]}
-  store={[Function MockStore]}
+  book$={[Function _Store]}
+  isSelectedBookInCollection$={[Function _Store]}
+  store={[Function _MockStore]}
 >
   <bc-book-detail>
   </bc-book-detail>

From 9cfc91e2a25615c41f83995b3661272455ba6adb Mon Sep 17 00:00:00 2001
From: Rainer Hahnekamp <rainer.hahnekamp@gmail.com>
Date: Mon, 16 Sep 2024 00:46:49 +0200
Subject: [PATCH 05/10] docs: move to new control flow syntax

---
 .../auth/components/login-form.component.ts   |  7 ++--
 .../books/components/book-detail.component.ts | 32 ++++++++-----------
 .../components/book-preview-list.component.ts |  7 ++--
 .../components/book-preview.component.ts      | 26 ++++++---------
 .../books/components/book-search.component.ts |  7 ++--
 .../app/core/components/nav-item.component.ts |  7 ++--
 .../src/app/core/containers/app.component.ts  | 21 +++++-------
 7 files changed, 48 insertions(+), 59 deletions(-)

diff --git a/projects/example-app/src/app/auth/components/login-form.component.ts b/projects/example-app/src/app/auth/components/login-form.component.ts
index 269d298e86..320eafcae4 100644
--- a/projects/example-app/src/app/auth/components/login-form.component.ts
+++ b/projects/example-app/src/app/auth/components/login-form.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Credentials } from '@example-app/auth/models';
@@ -7,7 +6,7 @@ import { MaterialModule } from '@example-app/material';
 @Component({
   standalone: true,
   selector: 'bc-login-form',
-  imports: [MaterialModule, ReactiveFormsModule, NgIf],
+  imports: [MaterialModule, ReactiveFormsModule],
   template: `
     <mat-card>
       <mat-card-title>Login</mat-card-title>
@@ -35,9 +34,11 @@ import { MaterialModule } from '@example-app/material';
             </mat-form-field>
           </p>
 
-          <p *ngIf="errorMessage" class="login-error">
+          @if (errorMessage) {
+          <p class="login-error">
             {{ errorMessage }}
           </p>
+          }
 
           <div class="login-buttons">
             <button type="submit" mat-button>Login</button>
diff --git a/projects/example-app/src/app/books/components/book-detail.component.ts b/projects/example-app/src/app/books/components/book-detail.component.ts
index 3453300464..1fe61f41ec 100644
--- a/projects/example-app/src/app/books/components/book-detail.component.ts
+++ b/projects/example-app/src/app/books/components/book-detail.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
@@ -8,13 +7,17 @@ import { BookAuthorsComponent } from './book-authors.component';
 @Component({
   standalone: true,
   selector: 'bc-book-detail',
-  imports: [MaterialModule, NgIf, BookAuthorsComponent],
+  imports: [MaterialModule, BookAuthorsComponent],
   template: `
-    <mat-card *ngIf="book">
+    @if (book) {
+    <mat-card>
       <mat-card-title-group>
         <mat-card-title>{{ title }}</mat-card-title>
-        <mat-card-subtitle *ngIf="subtitle">{{ subtitle }}</mat-card-subtitle>
-        <img mat-card-sm-image *ngIf="thumbnail" [src]="thumbnail" />
+        @if (subtitle) {
+        <mat-card-subtitle>{{ subtitle }}</mat-card-subtitle>
+        } @if (thumbnail) {
+        <img mat-card-sm-image [src]="thumbnail" />
+        }
       </mat-card-title-group>
       <mat-card-content>
         <p [innerHtml]="description"></p>
@@ -23,25 +26,18 @@ import { BookAuthorsComponent } from './book-authors.component';
         <bc-book-authors [book]="book"></bc-book-authors>
       </mat-card-footer>
       <mat-card-actions align="start">
-        <button
-          mat-raised-button
-          color="warn"
-          *ngIf="inCollection"
-          (click)="remove.emit(book)"
-        >
+        @if (inCollection) {
+        <button mat-raised-button color="warn" (click)="remove.emit(book)">
           Remove Book from Collection
         </button>
-
-        <button
-          mat-raised-button
-          color="primary"
-          *ngIf="!inCollection"
-          (click)="add.emit(book)"
-        >
+        } @if (!inCollection) {
+        <button mat-raised-button color="primary" (click)="add.emit(book)">
           Add Book to Collection
         </button>
+        }
       </mat-card-actions>
     </mat-card>
+    }
   `,
   styles: [
     `
diff --git a/projects/example-app/src/app/books/components/book-preview-list.component.ts b/projects/example-app/src/app/books/components/book-preview-list.component.ts
index 7ef391e47e..a7d7edfbeb 100644
--- a/projects/example-app/src/app/books/components/book-preview-list.component.ts
+++ b/projects/example-app/src/app/books/components/book-preview-list.component.ts
@@ -2,14 +2,15 @@ import { Component, Input } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
 import { BookPreviewComponent } from './book-preview.component';
-import { NgFor } from '@angular/common';
 
 @Component({
   standalone: true,
   selector: 'bc-book-preview-list',
-  imports: [BookPreviewComponent, NgFor],
+  imports: [BookPreviewComponent],
   template: `
-    <bc-book-preview *ngFor="let book of books" [book]="book"></bc-book-preview>
+    @for (book of books; track book) {
+    <bc-book-preview [book]="book"></bc-book-preview>
+    }
   `,
   styles: [
     `
diff --git a/projects/example-app/src/app/books/components/book-preview.component.ts b/projects/example-app/src/app/books/components/book-preview.component.ts
index eb56168424..3d0b89349d 100644
--- a/projects/example-app/src/app/books/components/book-preview.component.ts
+++ b/projects/example-app/src/app/books/components/book-preview.component.ts
@@ -5,35 +5,29 @@ import { Book } from '@example-app/books/models';
 import { MaterialModule } from '@example-app/material';
 import { EllipsisPipe } from '@example-app/shared/pipes/ellipsis.pipe';
 import { BookAuthorsComponent } from './book-authors.component';
-import { NgIf } from '@angular/common';
 
 @Component({
   standalone: true,
   selector: 'bc-book-preview',
-  imports: [
-    MaterialModule,
-    RouterLink,
-    EllipsisPipe,
-    BookAuthorsComponent,
-    NgIf,
-  ],
+  imports: [MaterialModule, RouterLink, EllipsisPipe, BookAuthorsComponent],
   template: `
     <a [routerLink]="['/books', id]">
       <mat-card>
         <mat-card-title-group>
-          <img
-            mat-card-sm-image
-            *ngIf="thumbnail"
-            [src]="thumbnail"
-            [alt]="title"
-          />
+          @if (thumbnail) {
+          <img mat-card-sm-image [src]="thumbnail" [alt]="title" />
+          }
           <mat-card-title>{{ title | bcEllipsis : 35 }}</mat-card-title>
-          <mat-card-subtitle *ngIf="subtitle">{{
+          @if (subtitle) {
+          <mat-card-subtitle>{{
             subtitle | bcEllipsis : 40
           }}</mat-card-subtitle>
+          }
         </mat-card-title-group>
         <mat-card-content>
-          <p *ngIf="description">{{ description | bcEllipsis }}</p>
+          @if (description) {
+          <p>{{ description | bcEllipsis }}</p>
+          }
         </mat-card-content>
         <mat-card-footer>
           <bc-book-authors [book]="book"></bc-book-authors>
diff --git a/projects/example-app/src/app/books/components/book-search.component.ts b/projects/example-app/src/app/books/components/book-search.component.ts
index 28c4f161d7..fe04c89b8d 100644
--- a/projects/example-app/src/app/books/components/book-search.component.ts
+++ b/projects/example-app/src/app/books/components/book-search.component.ts
@@ -1,11 +1,10 @@
-import { NgIf } from '@angular/common';
 import { Component, Output, Input, EventEmitter } from '@angular/core';
 import { MaterialModule } from '@example-app/material';
 
 @Component({
   standalone: true,
   selector: 'bc-book-search',
-  imports: [MaterialModule, NgIf],
+  imports: [MaterialModule],
   template: `
     <mat-card>
       <mat-card-title>Find a Book</mat-card-title>
@@ -25,7 +24,9 @@ import { MaterialModule } from '@example-app/material';
         ></mat-spinner>
       </mat-card-content>
       <mat-card-footer>
-        <span *ngIf="error">{{ error }}</span>
+        @if (error) {
+        <span>{{ error }}</span>
+        }
       </mat-card-footer>
     </mat-card>
   `,
diff --git a/projects/example-app/src/app/core/components/nav-item.component.ts b/projects/example-app/src/app/core/components/nav-item.component.ts
index 28e8753929..07be91c743 100644
--- a/projects/example-app/src/app/core/components/nav-item.component.ts
+++ b/projects/example-app/src/app/core/components/nav-item.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { MaterialModule } from '@example-app/material';
@@ -6,12 +5,14 @@ import { MaterialModule } from '@example-app/material';
 @Component({
   standalone: true,
   selector: 'bc-nav-item',
-  imports: [MaterialModule, RouterLink, NgIf],
+  imports: [MaterialModule, RouterLink],
   template: `
     <a mat-list-item [routerLink]="routerLink" (click)="navigate.emit()">
       <mat-icon matListItemIcon>{{ icon }}</mat-icon>
       <div matListItemTitle><ng-content></ng-content></div>
-      <div *ngIf="hint" matListItemLine>{{ hint }}</div>
+      @if (hint) {
+      <div matListItemLine>{{ hint }}</div>
+      }
     </a>
   `,
   styles: [
diff --git a/projects/example-app/src/app/core/containers/app.component.ts b/projects/example-app/src/app/core/containers/app.component.ts
index da3b2d9705..b2a4f034b0 100644
--- a/projects/example-app/src/app/core/containers/app.component.ts
+++ b/projects/example-app/src/app/core/containers/app.component.ts
@@ -13,7 +13,7 @@ import {
   ToolbarComponent,
 } from '../components';
 import { RouterLink, RouterOutlet } from '@angular/router';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { selectShowSidenav } from '../reducers/layout.reducer';
 
 @Component({
@@ -22,7 +22,6 @@ import { selectShowSidenav } from '../reducers/layout.reducer';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     RouterOutlet,
-    NgIf,
     AsyncPipe,
     RouterLink,
     LayoutComponent,
@@ -33,33 +32,29 @@ import { selectShowSidenav } from '../reducers/layout.reducer';
   template: `
     <bc-layout>
       <bc-sidenav [open]="(showSidenav$ | async)!" (closeMenu)="closeSidenav()">
+        @if (loggedIn$ | async) {
         <bc-nav-item
           (navigate)="closeSidenav()"
-          *ngIf="loggedIn$ | async"
           routerLink="/"
           icon="book"
           hint="View your book collection"
         >
           My Collection
         </bc-nav-item>
+        } @if (loggedIn$ | async) {
         <bc-nav-item
           (navigate)="closeSidenav()"
-          *ngIf="loggedIn$ | async"
           routerLink="/books/find"
           icon="search"
           hint="Find your next book!"
         >
           Browse Books
         </bc-nav-item>
-        <bc-nav-item
-          (navigate)="closeSidenav()"
-          *ngIf="(loggedIn$ | async) === false"
-        >
-          Sign In
-        </bc-nav-item>
-        <bc-nav-item (navigate)="logout()" *ngIf="loggedIn$ | async">
-          Sign Out
-        </bc-nav-item>
+        } @if ((loggedIn$ | async) === false) {
+        <bc-nav-item (navigate)="closeSidenav()"> Sign In </bc-nav-item>
+        } @if (loggedIn$ | async) {
+        <bc-nav-item (navigate)="logout()"> Sign Out </bc-nav-item>
+        }
       </bc-sidenav>
       <bc-toolbar (openMenu)="openSidenav()"> Book Collection </bc-toolbar>
 

From a1f53298f90321a1dd6a4cfbc5bd529d825e510a Mon Sep 17 00:00:00 2001
From: Rainer Hahnekamp <rainer.hahnekamp@gmail.com>
Date: Mon, 16 Sep 2024 01:52:27 +0200
Subject: [PATCH 06/10] docs: migrate to inject function

---
 .../login-form.component.spec.ts.snap         |  8 ++++++
 .../components/login-form.component.spec.ts   | 15 ++++++++++-
 .../auth/components/login-form.component.ts   |  6 +++--
 .../login-page.component.spec.ts.snap         |  2 ++
 .../auth/containers/login-page.component.ts   | 10 +++++---
 .../src/app/auth/effects/auth.effects.ts      | 24 ++++++++----------
 .../src/app/auth/services/auth.service.ts     |  2 +-
 .../components/book-authors.component.ts      |  4 +--
 .../books/components/book-detail.component.ts | 18 ++++++-------
 .../components/book-preview-list.component.ts |  2 +-
 .../components/book-preview.component.ts      | 18 ++++++-------
 .../view-book-page.component.spec.ts.snap     |  1 +
 .../containers/collection-page.component.ts   | 13 ++++++----
 .../containers/find-book-page.component.ts    | 25 ++++++++-----------
 .../selected-book-page.component.ts           | 17 ++++++-------
 .../containers/view-book-page.component.ts    | 20 +++++++++------
 .../src/app/books/effects/book.effects.ts     | 12 ++++-----
 .../app/books/effects/collection.effects.ts   | 18 ++++++-------
 .../src/app/core/containers/app.component.ts  | 19 ++++++--------
 .../src/app/core/effects/router.effects.ts    | 14 +++++------
 .../src/app/core/effects/user.effects.spec.ts | 11 +++++---
 .../src/app/core/effects/user.effects.ts      |  8 +++---
 .../app/core/services/book-storage.service.ts | 17 +++++++++----
 .../app/core/services/google-books.service.ts |  6 ++---
 24 files changed, 158 insertions(+), 132 deletions(-)

diff --git a/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap b/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
index b6f29bfbe1..c2ca2be6f1 100644
--- a/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
+++ b/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
@@ -2,6 +2,7 @@
 
 exports[`Login Page should compile 1`] = `
 <bc-login-form
+  errorMessage="null"
   form={[Function FormGroup]}
   submitted={[Function EventEmitter_]}
 >
@@ -40,6 +41,7 @@ exports[`Login Page should compile 1`] = `
                     aria-invalid="false"
                     aria-required="false"
                     class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
+                    data-testid="username"
                     formcontrolname="username"
                     matinput=""
                     placeholder="Username"
@@ -86,6 +88,7 @@ exports[`Login Page should compile 1`] = `
                     aria-invalid="false"
                     aria-required="false"
                     class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
+                    data-testid="password"
                     formcontrolname="password"
                     matinput=""
                     placeholder="Password"
@@ -146,6 +149,7 @@ exports[`Login Page should compile 1`] = `
 
 exports[`Login Page should disable the form if pending 1`] = `
 <bc-login-form
+  errorMessage="null"
   form={[Function FormGroup]}
   submitted={[Function EventEmitter_]}
 >
@@ -181,6 +185,7 @@ exports[`Login Page should disable the form if pending 1`] = `
                     aria-invalid="false"
                     aria-required="false"
                     class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine cdk-text-field-autofill-monitored"
+                    data-testid="username"
                     disabled=""
                     formcontrolname="username"
                     matinput=""
@@ -225,6 +230,7 @@ exports[`Login Page should disable the form if pending 1`] = `
                     aria-invalid="false"
                     aria-required="false"
                     class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine cdk-text-field-autofill-monitored"
+                    data-testid="password"
                     disabled=""
                     formcontrolname="password"
                     matinput=""
@@ -325,6 +331,7 @@ exports[`Login Page should display an error message if provided 1`] = `
                     aria-invalid="false"
                     aria-required="false"
                     class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
+                    data-testid="username"
                     formcontrolname="username"
                     matinput=""
                     placeholder="Username"
@@ -371,6 +378,7 @@ exports[`Login Page should display an error message if provided 1`] = `
                     aria-invalid="false"
                     aria-required="false"
                     class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
+                    data-testid="password"
                     formcontrolname="password"
                     matinput=""
                     placeholder="Password"
diff --git a/projects/example-app/src/app/auth/components/login-form.component.spec.ts b/projects/example-app/src/app/auth/components/login-form.component.spec.ts
index 0cb1e3456a..60fef8dcfd 100644
--- a/projects/example-app/src/app/auth/components/login-form.component.spec.ts
+++ b/projects/example-app/src/app/auth/components/login-form.component.spec.ts
@@ -2,6 +2,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { LoginFormComponent } from '@example-app/auth/components';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
 
 describe('Login Page', () => {
   let fixture: ComponentFixture<LoginFormComponent>;
@@ -57,7 +58,19 @@ describe('Login Page', () => {
       username: 'user',
       password: 'pass',
     };
-    instance.form.setValue(credentials);
+
+    const inpUsername: HTMLInputElement = fixture.debugElement.query(
+      By.css('input[data-testid=username]')
+    ).nativeElement;
+    const inpPassword: HTMLInputElement = fixture.debugElement.query(
+      By.css('input[data-testid=password]')
+    ).nativeElement;
+
+    fixture.detectChanges();
+    inpUsername.value = credentials.username;
+    inpUsername.dispatchEvent(new Event('input'));
+    inpPassword.value = credentials.password;
+    inpPassword.dispatchEvent(new Event('input'));
 
     jest.spyOn(instance.submitted, 'emit');
     instance.submit();
diff --git a/projects/example-app/src/app/auth/components/login-form.component.ts b/projects/example-app/src/app/auth/components/login-form.component.ts
index 320eafcae4..00d36064c8 100644
--- a/projects/example-app/src/app/auth/components/login-form.component.ts
+++ b/projects/example-app/src/app/auth/components/login-form.component.ts
@@ -19,6 +19,7 @@ import { MaterialModule } from '@example-app/material';
                 matInput
                 placeholder="Username"
                 formControlName="username"
+                data-testid="username"
               />
             </mat-form-field>
           </p>
@@ -30,6 +31,7 @@ import { MaterialModule } from '@example-app/material';
                 matInput
                 placeholder="Password"
                 formControlName="password"
+                data-testid="password"
               />
             </mat-form-field>
           </p>
@@ -94,11 +96,11 @@ export class LoginFormComponent {
     }
   }
 
-  @Input() errorMessage!: string | null;
+  @Input() errorMessage: string | null = null;
 
   @Output() submitted = new EventEmitter<Credentials>();
 
-  form: FormGroup = new FormGroup({
+  protected readonly form: FormGroup = new FormGroup({
     username: new FormControl('ngrx'),
     password: new FormControl(''),
   });
diff --git a/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap b/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
index b90481a4b3..99553aa0f8 100644
--- a/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
+++ b/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
@@ -42,6 +42,7 @@ exports[`Login Page should compile 1`] = `
                       aria-invalid="false"
                       aria-required="false"
                       class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
+                      data-testid="username"
                       formcontrolname="username"
                       matinput=""
                       placeholder="Username"
@@ -88,6 +89,7 @@ exports[`Login Page should compile 1`] = `
                       aria-invalid="false"
                       aria-required="false"
                       class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
+                      data-testid="password"
                       formcontrolname="password"
                       matinput=""
                       placeholder="Password"
diff --git a/projects/example-app/src/app/auth/containers/login-page.component.ts b/projects/example-app/src/app/auth/containers/login-page.component.ts
index e85d256c94..6922102b5c 100644
--- a/projects/example-app/src/app/auth/containers/login-page.component.ts
+++ b/projects/example-app/src/app/auth/containers/login-page.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Credentials } from '@example-app/auth/models';
 import * as fromAuth from '@example-app/auth/reducers';
@@ -21,10 +21,12 @@ import { AsyncPipe } from '@angular/common';
   styles: [],
 })
 export class LoginPageComponent {
-  pending$ = this.store.select(fromAuth.selectLoginPagePending);
-  error$ = this.store.select(fromAuth.selectLoginPageError);
+  private store = inject(Store);
 
-  constructor(private store: Store) {}
+  protected readonly pending$ = this.store.select(
+    fromAuth.selectLoginPagePending
+  );
+  protected readonly error$ = this.store.select(fromAuth.selectLoginPageError);
 
   onSubmit(credentials: Credentials) {
     this.store.dispatch(LoginPageActions.login({ credentials }));
diff --git a/projects/example-app/src/app/auth/effects/auth.effects.ts b/projects/example-app/src/app/auth/effects/auth.effects.ts
index 8fe1278272..4afa3cbae6 100644
--- a/projects/example-app/src/app/auth/effects/auth.effects.ts
+++ b/projects/example-app/src/app/auth/effects/auth.effects.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { Actions, ofType, createEffect } from '@ngrx/effects';
@@ -14,7 +14,12 @@ import { UserActions } from '@example-app/core/actions/user.actions';
 
 @Injectable()
 export class AuthEffects {
-  login$ = createEffect(() =>
+  private readonly actions$ = inject(Actions);
+  private readonly authService = inject(AuthService);
+  private readonly router = inject(Router);
+  private readonly dialog = inject(MatDialog);
+
+  readonly login$ = createEffect(() =>
     this.actions$.pipe(
       ofType(LoginPageActions.login),
       map((action) => action.credentials),
@@ -27,7 +32,7 @@ export class AuthEffects {
     )
   );
 
-  loginSuccess$ = createEffect(
+  readonly loginSuccess$ = createEffect(
     () =>
       this.actions$.pipe(
         ofType(AuthApiActions.loginSuccess),
@@ -36,7 +41,7 @@ export class AuthEffects {
     { dispatch: false }
   );
 
-  loginRedirect$ = createEffect(
+  readonly loginRedirect$ = createEffect(
     () =>
       this.actions$.pipe(
         ofType(AuthApiActions.loginRedirect, AuthActions.logout),
@@ -47,7 +52,7 @@ export class AuthEffects {
     { dispatch: false }
   );
 
-  logoutConfirmation$ = createEffect(() =>
+  readonly logoutConfirmation$ = createEffect(() =>
     this.actions$.pipe(
       ofType(AuthActions.logoutConfirmation),
       exhaustMap(() => {
@@ -65,17 +70,10 @@ export class AuthEffects {
     )
   );
 
-  logoutIdleUser$ = createEffect(() =>
+  readonly logoutIdleUser$ = createEffect(() =>
     this.actions$.pipe(
       ofType(UserActions.idleTimeout),
       map(() => AuthActions.logout())
     )
   );
-
-  constructor(
-    private actions$: Actions,
-    private authService: AuthService,
-    private router: Router,
-    private dialog: MatDialog
-  ) {}
 }
diff --git a/projects/example-app/src/app/auth/services/auth.service.ts b/projects/example-app/src/app/auth/services/auth.service.ts
index e3fbd2c859..0e1aafa06c 100644
--- a/projects/example-app/src/app/auth/services/auth.service.ts
+++ b/projects/example-app/src/app/auth/services/auth.service.ts
@@ -7,7 +7,7 @@ import { Credentials, User } from '@example-app/auth/models';
   providedIn: 'root',
 })
 export class AuthService {
-  login({ username, password }: Credentials): Observable<User> {
+  login({ username }: Credentials): Observable<User> {
     /**
      * Simulate a failed login to display the error
      * message for the login form.
diff --git a/projects/example-app/src/app/books/components/book-authors.component.ts b/projects/example-app/src/app/books/components/book-authors.component.ts
index 5a59cb23bd..363b1a5dae 100644
--- a/projects/example-app/src/app/books/components/book-authors.component.ts
+++ b/projects/example-app/src/app/books/components/book-authors.component.ts
@@ -23,9 +23,9 @@ import { AddCommasPipe } from '@example-app/shared/pipes/add-commas.pipe';
   ],
 })
 export class BookAuthorsComponent {
-  @Input() book!: Book;
+  @Input() book: Book | undefined = undefined;
 
   get authors() {
-    return this.book.volumeInfo.authors;
+    return this.book?.volumeInfo.authors || [];
   }
 }
diff --git a/projects/example-app/src/app/books/components/book-detail.component.ts b/projects/example-app/src/app/books/components/book-detail.component.ts
index 1fe61f41ec..3a9918c0d5 100644
--- a/projects/example-app/src/app/books/components/book-detail.component.ts
+++ b/projects/example-app/src/app/books/components/book-detail.component.ts
@@ -78,8 +78,8 @@ export class BookDetailComponent {
    *
    * More on 'smart' and 'presentational' components: https://gist.github.com/btroncone/a6e4347326749f938510#utilizing-container-components
    */
-  @Input() book!: Book;
-  @Input() inCollection!: boolean;
+  @Input() book: Book | undefined = undefined;
+  @Input() inCollection = false;
   @Output() add = new EventEmitter<Book>();
   @Output() remove = new EventEmitter<Book>();
 
@@ -87,26 +87,22 @@ export class BookDetailComponent {
    * Tip: Utilize getters to keep templates clean
    */
   get id() {
-    return this.book.id;
+    return this.book?.id;
   }
 
   get title() {
-    return this.book.volumeInfo.title;
+    return this.book?.volumeInfo.title;
   }
 
   get subtitle() {
-    return this.book.volumeInfo.subtitle;
+    return this.book?.volumeInfo.subtitle;
   }
 
   get description() {
-    return this.book.volumeInfo.description;
+    return this.book?.volumeInfo.description;
   }
 
   get thumbnail() {
-    return (
-      this.book.volumeInfo.imageLinks &&
-      this.book.volumeInfo.imageLinks.smallThumbnail &&
-      this.book.volumeInfo.imageLinks.smallThumbnail.replace('http:', '')
-    );
+    return this.book?.volumeInfo.imageLinks.smallThumbnail.replace('http:', '');
   }
 }
diff --git a/projects/example-app/src/app/books/components/book-preview-list.component.ts b/projects/example-app/src/app/books/components/book-preview-list.component.ts
index a7d7edfbeb..5884a5c4bc 100644
--- a/projects/example-app/src/app/books/components/book-preview-list.component.ts
+++ b/projects/example-app/src/app/books/components/book-preview-list.component.ts
@@ -23,5 +23,5 @@ import { BookPreviewComponent } from './book-preview.component';
   ],
 })
 export class BookPreviewListComponent {
-  @Input() books!: Book[];
+  @Input() books = new Array<Book>();
 }
diff --git a/projects/example-app/src/app/books/components/book-preview.component.ts b/projects/example-app/src/app/books/components/book-preview.component.ts
index 3d0b89349d..f6ffe3048d 100644
--- a/projects/example-app/src/app/books/components/book-preview.component.ts
+++ b/projects/example-app/src/app/books/components/book-preview.component.ts
@@ -19,9 +19,9 @@ import { BookAuthorsComponent } from './book-authors.component';
           }
           <mat-card-title>{{ title | bcEllipsis : 35 }}</mat-card-title>
           @if (subtitle) {
-          <mat-card-subtitle>{{
-            subtitle | bcEllipsis : 40
-          }}</mat-card-subtitle>
+          <mat-card-subtitle
+            >{{ subtitle | bcEllipsis : 40 }}
+          </mat-card-subtitle>
           }
         </mat-card-title-group>
         <mat-card-content>
@@ -85,26 +85,26 @@ import { BookAuthorsComponent } from './book-authors.component';
   ],
 })
 export class BookPreviewComponent {
-  @Input() book!: Book;
+  @Input() book: Book | undefined = undefined;
 
   get id() {
-    return this.book.id;
+    return this.book?.id;
   }
 
   get title() {
-    return this.book.volumeInfo.title;
+    return this.book?.volumeInfo.title || '';
   }
 
   get subtitle() {
-    return this.book.volumeInfo.subtitle;
+    return this.book?.volumeInfo.subtitle;
   }
 
   get description() {
-    return this.book.volumeInfo.description;
+    return this.book?.volumeInfo.description;
   }
 
   get thumbnail(): string | boolean {
-    if (this.book.volumeInfo.imageLinks) {
+    if (this.book?.volumeInfo.imageLinks) {
       return this.book.volumeInfo.imageLinks.smallThumbnail.replace(
         'http:',
         ''
diff --git a/projects/example-app/src/app/books/containers/__snapshots__/view-book-page.component.spec.ts.snap b/projects/example-app/src/app/books/containers/__snapshots__/view-book-page.component.spec.ts.snap
index 39c5232428..006c0c7d02 100644
--- a/projects/example-app/src/app/books/containers/__snapshots__/view-book-page.component.spec.ts.snap
+++ b/projects/example-app/src/app/books/containers/__snapshots__/view-book-page.component.spec.ts.snap
@@ -3,6 +3,7 @@
 exports[`View Book Page should compile 1`] = `
 <bc-view-book-page
   actionsSubscription={[Function SafeSubscriber]}
+  store={[Function _MockStore]}
 >
   <bc-selected-book-page>
     <bc-book-detail>
diff --git a/projects/example-app/src/app/books/containers/collection-page.component.ts b/projects/example-app/src/app/books/containers/collection-page.component.ts
index c0e6308cfd..68a2de7d60 100644
--- a/projects/example-app/src/app/books/containers/collection-page.component.ts
+++ b/projects/example-app/src/app/books/containers/collection-page.component.ts
@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
 
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
@@ -39,11 +44,9 @@ import { AsyncPipe } from '@angular/common';
   ],
 })
 export class CollectionPageComponent implements OnInit {
-  books$: Observable<Book[]>;
+  private readonly store = inject(Store);
 
-  constructor(private store: Store) {
-    this.books$ = store.select(fromBooks.selectBookCollection);
-  }
+  protected books$ = this.store.select(fromBooks.selectBookCollection);
 
   ngOnInit() {
     this.store.dispatch(CollectionPageActions.enter());
diff --git a/projects/example-app/src/app/books/containers/find-book-page.component.ts b/projects/example-app/src/app/books/containers/find-book-page.component.ts
index 86ba1f132b..2b283b9ecd 100644
--- a/projects/example-app/src/app/books/containers/find-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/find-book-page.component.ts
@@ -1,11 +1,9 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { FindBookPageActions } from '@example-app/books/actions/find-book-page.actions';
-import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
 import { BookPreviewListComponent, BookSearchComponent } from '../components';
 import { AsyncPipe } from '@angular/common';
@@ -23,21 +21,20 @@ import { AsyncPipe } from '@angular/common';
       (search)="search($event)"
     >
     </bc-book-search>
-    <bc-book-preview-list [books]="(books$ | async)!"> </bc-book-preview-list>
+    <bc-book-preview-list [books]="(books$ | async)!"></bc-book-preview-list>
   `,
 })
 export class FindBookPageComponent {
-  searchQuery$: Observable<string>;
-  books$: Observable<Book[]>;
-  loading$: Observable<boolean>;
-  error$: Observable<string>;
+  private store = inject(Store);
 
-  constructor(private store: Store) {
-    this.searchQuery$ = store.select(fromBooks.selectSearchQuery).pipe(take(1));
-    this.books$ = store.select(fromBooks.selectSearchResults);
-    this.loading$ = store.select(fromBooks.selectSearchLoading);
-    this.error$ = store.select(fromBooks.selectSearchError);
-  }
+  protected readonly searchQuery$ = this.store
+    .select(fromBooks.selectSearchQuery)
+    .pipe(take(1));
+  protected readonly books$ = this.store.select(fromBooks.selectSearchResults);
+  protected readonly loading$ = this.store.select(
+    fromBooks.selectSearchLoading
+  );
+  protected readonly error$ = this.store.select(fromBooks.selectSearchError);
 
   search(query: string) {
     this.store.dispatch(FindBookPageActions.searchBooks({ query }));
diff --git a/projects/example-app/src/app/books/containers/selected-book-page.component.ts b/projects/example-app/src/app/books/containers/selected-book-page.component.ts
index e16ba31976..9f1fcde8ed 100644
--- a/projects/example-app/src/app/books/containers/selected-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/selected-book-page.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
@@ -25,15 +25,14 @@ import { AsyncPipe } from '@angular/common';
   `,
 })
 export class SelectedBookPageComponent {
-  book$: Observable<Book>;
-  isSelectedBookInCollection$: Observable<boolean>;
+  private readonly store = inject(Store);
 
-  constructor(private store: Store) {
-    this.book$ = store.select(fromBooks.selectSelectedBook) as Observable<Book>;
-    this.isSelectedBookInCollection$ = store.select(
-      fromBooks.isSelectedBookInCollection
-    );
-  }
+  protected readonly book$ = this.store.select(
+    fromBooks.selectSelectedBook
+  ) as Observable<Book>;
+  protected readonly isSelectedBookInCollection$ = this.store.select(
+    fromBooks.isSelectedBookInCollection
+  );
 
   addToCollection(book: Book) {
     this.store.dispatch(SelectedBookPageActions.addBook({ book }));
diff --git a/projects/example-app/src/app/books/containers/view-book-page.component.ts b/projects/example-app/src/app/books/containers/view-book-page.component.ts
index a6295f1860..df288f1917 100644
--- a/projects/example-app/src/app/books/containers/view-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/view-book-page.component.ts
@@ -1,7 +1,11 @@
-import { Component, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
+import {
+  Component,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  inject,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.actions';
@@ -25,13 +29,13 @@ import { SelectedBookPageComponent } from './selected-book-page.component';
   template: ` <bc-selected-book-page></bc-selected-book-page> `,
 })
 export class ViewBookPageComponent implements OnDestroy {
-  actionsSubscription: Subscription;
+  private readonly store = inject(Store);
 
-  constructor(store: Store, route: ActivatedRoute) {
-    this.actionsSubscription = route.params
-      .pipe(map((params) => ViewBookPageActions.selectBook({ id: params.id })))
-      .subscribe((action) => store.dispatch(action));
-  }
+  private readonly actionsSubscription = inject(ActivatedRoute)
+    .params.pipe(
+      map((params) => ViewBookPageActions.selectBook({ id: params.id }))
+    )
+    .subscribe((action) => this.store.dispatch(action));
 
   ngOnDestroy() {
     this.actionsSubscription.unsubscribe();
diff --git a/projects/example-app/src/app/books/effects/book.effects.ts b/projects/example-app/src/app/books/effects/book.effects.ts
index 63aea38e7f..8622780ff1 100644
--- a/projects/example-app/src/app/books/effects/book.effects.ts
+++ b/projects/example-app/src/app/books/effects/book.effects.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { asyncScheduler, EMPTY as empty, of } from 'rxjs';
@@ -29,7 +29,10 @@ import { GoogleBooksService } from '@example-app/core/services';
 
 @Injectable()
 export class BookEffects {
-  search$ = createEffect(
+  private readonly actions$ = inject(Actions);
+  private readonly googleBooks = inject(GoogleBooksService);
+
+  readonly search$ = createEffect(
     () =>
       ({ debounce = 300, scheduler = asyncScheduler } = {}) =>
         this.actions$.pipe(
@@ -55,9 +58,4 @@ export class BookEffects {
           })
         )
   );
-
-  constructor(
-    private actions$: Actions,
-    private googleBooks: GoogleBooksService
-  ) {}
 }
diff --git a/projects/example-app/src/app/books/effects/collection.effects.ts b/projects/example-app/src/app/books/effects/collection.effects.ts
index a85711003d..33c69a924d 100644
--- a/projects/example-app/src/app/books/effects/collection.effects.ts
+++ b/projects/example-app/src/app/books/effects/collection.effects.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { defer, of } from 'rxjs';
@@ -12,6 +12,9 @@ import { BookStorageService } from '@example-app/core/services';
 
 @Injectable()
 export class CollectionEffects {
+  private readonly actions$ = inject(Actions);
+  private readonly storageService = inject(BookStorageService);
+
   /**
    * This effect does not yield any actions back to the store. Set
    * `dispatch` to false to hint to @ngrx/effects that it should
@@ -22,12 +25,12 @@ export class CollectionEffects {
    * Wrapping the supported call in `defer` makes
    * effect easier to test.
    */
-  checkStorageSupport$ = createEffect(
+  readonly checkStorageSupport$ = createEffect(
     () => defer(() => this.storageService.supported()),
     { dispatch: false }
   );
 
-  loadCollection$ = createEffect(() =>
+  readonly loadCollection$ = createEffect(() =>
     this.actions$.pipe(
       ofType(CollectionPageActions.enter),
       switchMap(() =>
@@ -43,7 +46,7 @@ export class CollectionEffects {
     )
   );
 
-  addBookToCollection$ = createEffect(() =>
+  readonly addBookToCollection$ = createEffect(() =>
     this.actions$.pipe(
       ofType(SelectedBookPageActions.addBook),
       mergeMap(({ book }) =>
@@ -55,7 +58,7 @@ export class CollectionEffects {
     )
   );
 
-  removeBookFromCollection$ = createEffect(() =>
+  readonly removeBookFromCollection$ = createEffect(() =>
     this.actions$.pipe(
       ofType(SelectedBookPageActions.removeBook),
       mergeMap(({ book }) =>
@@ -66,9 +69,4 @@ export class CollectionEffects {
       )
     )
   );
-
-  constructor(
-    private actions$: Actions,
-    private storageService: BookStorageService
-  ) {}
 }
diff --git a/projects/example-app/src/app/core/containers/app.component.ts b/projects/example-app/src/app/core/containers/app.component.ts
index b2a4f034b0..56f285d4e6 100644
--- a/projects/example-app/src/app/core/containers/app.component.ts
+++ b/projects/example-app/src/app/core/containers/app.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
@@ -63,17 +63,14 @@ import { selectShowSidenav } from '../reducers/layout.reducer';
   `,
 })
 export class AppComponent {
-  showSidenav$: Observable<boolean>;
-  loggedIn$: Observable<boolean>;
+  private readonly store = inject(Store);
 
-  constructor(private store: Store) {
-    /**
-     * Selectors can be applied with the `select` operator which passes the state
-     * tree to the provided selector
-     */
-    this.showSidenav$ = this.store.select(selectShowSidenav);
-    this.loggedIn$ = this.store.select(fromAuth.selectLoggedIn);
-  }
+  /**
+   * Selectors can be applied with the `select` operator which passes the state
+   * tree to the provided selector
+   */
+  protected readonly showSidenav$ = this.store.select(selectShowSidenav);
+  protected readonly loggedIn$ = this.store.select(fromAuth.selectLoggedIn);
 
   closeSidenav() {
     /**
diff --git a/projects/example-app/src/app/core/effects/router.effects.ts b/projects/example-app/src/app/core/effects/router.effects.ts
index 75d6e9c789..1b13cbad16 100644
--- a/projects/example-app/src/app/core/effects/router.effects.ts
+++ b/projects/example-app/src/app/core/effects/router.effects.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 
 import { map, tap } from 'rxjs/operators';
@@ -12,7 +12,11 @@ import * as fromRoot from '@example-app/reducers';
 
 @Injectable()
 export class RouterEffects {
-  updateTitle$ = createEffect(
+  private readonly actions$ = inject(Actions);
+  private readonly store = inject(Store);
+  private readonly titleService = inject(Title);
+
+  readonly updateTitle$ = createEffect(
     () =>
       this.actions$.pipe(
         ofType(routerNavigatedAction),
@@ -24,10 +28,4 @@ export class RouterEffects {
       dispatch: false,
     }
   );
-
-  constructor(
-    private actions$: Actions,
-    private store: Store,
-    private titleService: Title
-  ) {}
 }
diff --git a/projects/example-app/src/app/core/effects/user.effects.spec.ts b/projects/example-app/src/app/core/effects/user.effects.spec.ts
index 5aa06446af..5a7e269699 100644
--- a/projects/example-app/src/app/core/effects/user.effects.spec.ts
+++ b/projects/example-app/src/app/core/effects/user.effects.spec.ts
@@ -1,11 +1,13 @@
-import { Action } from '@ngrx/store';
+import { Action, provideStore } from '@ngrx/store';
 import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 
 import { UserEffects } from '@example-app/core/effects';
 import { UserActions } from '@example-app/core/actions/user.actions';
+import { Actions, provideEffects } from '@ngrx/effects';
 
 describe('UserEffects', () => {
   let effects: UserEffects;
+  let actions$: Actions;
   const eventsMap: { [key: string]: any } = {};
 
   beforeAll(() => {
@@ -16,16 +18,17 @@ describe('UserEffects', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [UserEffects],
+      providers: [provideStore(), provideEffects(UserEffects)],
     });
 
     effects = TestBed.inject(UserEffects);
+    actions$ = TestBed.inject(Actions);
   });
 
   describe('idle$', () => {
     it('should trigger idleTimeout action after 5 minutes', fakeAsync(() => {
       let action: Action | undefined;
-      effects.idle$.subscribe((res) => (action = res));
+      actions$.subscribe((res) => (action = res));
 
       // Initial action to trigger the effect
       eventsMap['click']();
@@ -40,7 +43,7 @@ describe('UserEffects', () => {
 
     it('should reset timeout on user activity', fakeAsync(() => {
       let action: Action | undefined;
-      effects.idle$.subscribe((res) => (action = res));
+      actions$.subscribe((res) => (action = res));
 
       // Initial action to trigger the effect
       eventsMap['keydown']();
diff --git a/projects/example-app/src/app/core/effects/user.effects.ts b/projects/example-app/src/app/core/effects/user.effects.ts
index 1a96067006..4a6e3196c5 100644
--- a/projects/example-app/src/app/core/effects/user.effects.ts
+++ b/projects/example-app/src/app/core/effects/user.effects.ts
@@ -8,11 +8,11 @@ import { UserActions } from '@example-app/core/actions/user.actions';
 
 @Injectable()
 export class UserEffects {
-  clicks$ = fromEvent(document, 'click');
-  keys$ = fromEvent(document, 'keydown');
-  mouse$ = fromEvent(document, 'mousemove');
+  private readonly clicks$ = fromEvent(document, 'click');
+  private readonly keys$ = fromEvent(document, 'keydown');
+  private readonly mouse$ = fromEvent(document, 'mousemove');
 
-  idle$ = createEffect(() =>
+  protected idle$ = createEffect(() =>
     merge(this.clicks$, this.keys$, this.mouse$).pipe(
       // 5 minute inactivity timeout
       switchMap(() => timer(5 * 60 * 1000)),
diff --git a/projects/example-app/src/app/core/services/book-storage.service.ts b/projects/example-app/src/app/core/services/book-storage.service.ts
index 1fa32c568c..2abb4bbfe9 100644
--- a/projects/example-app/src/app/core/services/book-storage.service.ts
+++ b/projects/example-app/src/app/core/services/book-storage.service.ts
@@ -1,13 +1,20 @@
-import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { inject, Injectable, InjectionToken } from '@angular/core';
 
 import { Observable, of, throwError } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 import { Book } from '@example-app/books/models';
 
+// returns a dummy store if localStorage is not available
 export function storageFactory() {
   return typeof window === 'undefined' || typeof localStorage === 'undefined'
-    ? null
+    ? {
+        getItem() {
+          return '';
+        },
+        setItem() {},
+        removeItem() {},
+      }
     : localStorage;
 }
 
@@ -18,7 +25,9 @@ export const LOCAL_STORAGE_TOKEN = new InjectionToken(
 
 @Injectable({ providedIn: 'root' })
 export class BookStorageService {
-  private collectionKey = 'books-app';
+  private readonly collectionKey = 'books-app';
+
+  private readonly storage = inject(LOCAL_STORAGE_TOKEN);
 
   supported(): Observable<boolean> {
     return this.storage !== null
@@ -56,6 +65,4 @@ export class BookStorageService {
       tap(() => this.storage.removeItem(this.collectionKey))
     );
   }
-
-  constructor(@Inject(LOCAL_STORAGE_TOKEN) private storage: Storage) {}
 }
diff --git a/projects/example-app/src/app/core/services/google-books.service.ts b/projects/example-app/src/app/core/services/google-books.service.ts
index 783f9ea9e4..1fda366589 100644
--- a/projects/example-app/src/app/core/services/google-books.service.ts
+++ b/projects/example-app/src/app/core/services/google-books.service.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -10,9 +10,9 @@ import { Book } from '@example-app/books/models';
   providedIn: 'root',
 })
 export class GoogleBooksService {
-  private API_PATH = 'https://www.googleapis.com/books/v1/volumes';
+  private readonly API_PATH = 'https://www.googleapis.com/books/v1/volumes';
 
-  constructor(private http: HttpClient) {}
+  private readonly http = inject(HttpClient);
 
   searchBooks(queryTitle: string): Observable<Book[]> {
     return this.http

From 2be4bdaa455954998714632749c8a25b60f21c84 Mon Sep 17 00:00:00 2001
From: Rainer Hahnekamp <rainer.hahnekamp@gmail.com>
Date: Tue, 17 Sep 2024 16:18:02 +0200
Subject: [PATCH 07/10] docs: refactor books to `createFeature`

---
 .../example-app/src/app/books/books.routes.ts |  24 +---
 .../app/books/reducers/books.reducer.spec.ts  |  16 +--
 .../src/app/books/reducers/books.reducer.ts   |  70 +++++------
 .../app/books/reducers/collection.reducer.ts  |  95 +++++++-------
 .../src/app/books/reducers/index.ts           | 117 +++++-------------
 .../src/app/books/reducers/search.reducer.ts  |  81 ++++++------
 6 files changed, 158 insertions(+), 245 deletions(-)

diff --git a/projects/example-app/src/app/books/books.routes.ts b/projects/example-app/src/app/books/books.routes.ts
index 7767e91619..ce2f4c64bc 100644
--- a/projects/example-app/src/app/books/books.routes.ts
+++ b/projects/example-app/src/app/books/books.routes.ts
@@ -6,32 +6,12 @@ import {
   ViewBookPageComponent,
 } from '@example-app/books/containers';
 import { bookExistsGuard } from '@example-app/books/guards';
-import { provideState } from '@ngrx/store';
-import * as fromBooks from '@example-app/books/reducers';
-import { provideEffects } from '@ngrx/effects';
-import { BookEffects, CollectionEffects } from './effects';
+import { provideBooks } from '@example-app/books/reducers';
 
 export const BOOKS_ROUTES: Routes = [
   {
     path: '',
-    providers: [
-      /**
-       * provideState() is used for composing state
-       * from feature modules. These modules can be loaded
-       * eagerly or lazily and will be dynamically added to
-       * the existing state.
-       */
-      provideState(fromBooks.booksFeatureKey, fromBooks.reducers),
-      /**
-       * provideEffects() is used to register effects
-       * from feature modules. Effects can be loaded
-       * eagerly or lazily and will be started immediately.
-       *
-       * All Effects will only be instantiated once regardless of
-       * whether they are registered once or multiple times.
-       */
-      provideEffects(BookEffects, CollectionEffects),
-    ],
+    providers: [provideBooks()],
     children: [
       {
         path: 'find',
diff --git a/projects/example-app/src/app/books/reducers/books.reducer.spec.ts b/projects/example-app/src/app/books/reducers/books.reducer.spec.ts
index 089660df31..4957dddf26 100644
--- a/projects/example-app/src/app/books/reducers/books.reducer.spec.ts
+++ b/projects/example-app/src/app/books/reducers/books.reducer.spec.ts
@@ -1,10 +1,10 @@
-import { reducer } from '@example-app/books/reducers/books.reducer';
 import * as fromBooks from '@example-app/books/reducers/books.reducer';
 import { BooksApiActions } from '@example-app/books/actions/books-api.actions';
 import { BookActions } from '@example-app/books/actions/book.actions';
 import { CollectionApiActions } from '@example-app/books/actions/collection-api.actions';
 import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.actions';
 import { Book, generateMockBook } from '@example-app/books/models';
+import { booksFeature } from '@example-app/books/reducers/books.reducer';
 
 describe('BooksReducer', () => {
   const book1 = generateMockBook();
@@ -21,7 +21,7 @@ describe('BooksReducer', () => {
 
   describe('undefined action', () => {
     it('should return the default state', () => {
-      const result = reducer(undefined, {} as any);
+      const result = booksFeature.reducer(undefined, {} as any);
 
       expect(result).toMatchSnapshot();
     });
@@ -38,7 +38,7 @@ describe('BooksReducer', () => {
     ) {
       const createAction = action({ books });
 
-      const result = reducer(booksInitialState, createAction);
+      const result = booksFeature.reducer(booksInitialState, createAction);
 
       expect(result).toMatchSnapshot();
     }
@@ -52,7 +52,7 @@ describe('BooksReducer', () => {
       const differentBook2 = { ...books[0], foo: 'bar' };
       const createAction = action({ books: [books[1], differentBook2] });
 
-      const result = reducer(booksInitialState, createAction);
+      const result = booksFeature.reducer(booksInitialState, createAction);
 
       expect(result).toMatchSnapshot();
     }
@@ -94,7 +94,7 @@ describe('BooksReducer', () => {
     it('should add a single book, if the book does not exist', () => {
       const action = BookActions.loadBook({ book: book1 });
 
-      const result = reducer(fromBooks.initialState, action);
+      const result = booksFeature.reducer(fromBooks.initialState, action);
 
       expect(result).toMatchSnapshot();
     });
@@ -102,7 +102,7 @@ describe('BooksReducer', () => {
     it('should return the existing state if the book exists', () => {
       const action = BookActions.loadBook({ book: book1 });
 
-      const result = reducer(expectedResult, action);
+      const result = booksFeature.reducer(expectedResult, action);
 
       expect(result).toMatchSnapshot();
     });
@@ -112,7 +112,7 @@ describe('BooksReducer', () => {
     it('should set the selected book id on the state', () => {
       const action = ViewBookPageActions.selectBook({ id: book1.id });
 
-      const result = reducer(initialState, action);
+      const result = booksFeature.reducer(initialState, action);
 
       expect(result).toMatchSnapshot();
     });
@@ -121,7 +121,7 @@ describe('BooksReducer', () => {
   describe('Selectors', () => {
     describe('selectId', () => {
       it('should return the selected id', () => {
-        const result = fromBooks.selectId({
+        const result = booksFeature.selectSelectedBookId.projector({
           ...initialState,
           selectedBookId: book1.id,
         });
diff --git a/projects/example-app/src/app/books/reducers/books.reducer.ts b/projects/example-app/src/app/books/reducers/books.reducer.ts
index 30c01bae49..de64394dff 100644
--- a/projects/example-app/src/app/books/reducers/books.reducer.ts
+++ b/projects/example-app/src/app/books/reducers/books.reducer.ts
@@ -1,5 +1,5 @@
 import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
-import { createReducer, on } from '@ngrx/store';
+import { createFeature, createReducer, on } from '@ngrx/store';
 
 import { BooksApiActions } from '@example-app/books/actions/books-api.actions';
 import { BookActions } from '@example-app/books/actions/book.actions';
@@ -7,8 +7,6 @@ import { CollectionApiActions } from '@example-app/books/actions/collection-api.
 import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.actions';
 import { Book } from '@example-app/books/models';
 
-export const booksFeatureKey = 'books';
-
 /**
  * @ngrx/entity provides a predefined interface for handling
  * a structured dictionary of records. This interface
@@ -42,41 +40,33 @@ export const initialState: State = adapter.getInitialState({
   selectedBookId: null,
 });
 
-export const reducer = createReducer(
-  initialState,
-  /**
-   * The addMany function provided by the created adapter
-   * adds many records to the entity dictionary
-   * and returns a new state including those records. If
-   * the collection is to be sorted, the adapter will
-   * sort each record upon entry into the sorted array.
-   */
-  on(
-    BooksApiActions.searchSuccess,
-    CollectionApiActions.loadBooksSuccess,
-    (state, { books }) => adapter.addMany(books, state)
+export const booksFeature = createFeature({
+  name: 'books',
+  reducer: createReducer(
+    initialState,
+    /**
+     * The addMany function provided by the created adapter
+     * adds many records to the entity dictionary
+     * and returns a new state including those records. If
+     * the collection is to be sorted, the adapter will
+     * sort each record upon entry into the sorted array.
+     */
+    on(
+      BooksApiActions.searchSuccess,
+      CollectionApiActions.loadBooksSuccess,
+      (state, { books }) => adapter.addMany(books, state)
+    ),
+    /**
+     * The addOne function provided by the created adapter
+     * adds one record to the entity dictionary
+     * and returns a new state including that records if it doesn't
+     * exist already. If the collection is to be sorted, the adapter will
+     * insert the new record into the sorted array.
+     */
+    on(BookActions.loadBook, (state, { book }) => adapter.addOne(book, state)),
+    on(ViewBookPageActions.selectBook, (state, { id }) => ({
+      ...state,
+      selectedBookId: id,
+    }))
   ),
-  /**
-   * The addOne function provided by the created adapter
-   * adds one record to the entity dictionary
-   * and returns a new state including that records if it doesn't
-   * exist already. If the collection is to be sorted, the adapter will
-   * insert the new record into the sorted array.
-   */
-  on(BookActions.loadBook, (state, { book }) => adapter.addOne(book, state)),
-  on(ViewBookPageActions.selectBook, (state, { id }) => ({
-    ...state,
-    selectedBookId: id,
-  }))
-);
-
-/**
- * Because the data structure is defined within the reducer it is optimal to
- * locate our selector functions at this level. If store is to be thought of
- * as a database, and reducers the tables, selectors can be considered the
- * queries into said database. Remember to keep your selectors small and
- * focused so they can be combined and composed to fit each particular
- * use-case.
- */
-
-export const selectId = (state: State) => state.selectedBookId;
+});
diff --git a/projects/example-app/src/app/books/reducers/collection.reducer.ts b/projects/example-app/src/app/books/reducers/collection.reducer.ts
index f3a1408c48..ef04473b81 100644
--- a/projects/example-app/src/app/books/reducers/collection.reducer.ts
+++ b/projects/example-app/src/app/books/reducers/collection.reducer.ts
@@ -1,11 +1,9 @@
-import { createReducer, on } from '@ngrx/store';
+import { createFeature, createReducer, on } from '@ngrx/store';
 
 import { CollectionApiActions } from '@example-app/books/actions/collection-api.actions';
 import { CollectionPageActions } from '@example-app/books/actions/collection-page.actions';
 import { SelectedBookPageActions } from '@example-app/books/actions/selected-book-page.actions';
 
-export const collectionFeatureKey = 'collection';
-
 export interface State {
   loaded: boolean;
   loading: boolean;
@@ -18,53 +16,56 @@ const initialState: State = {
   ids: [],
 };
 
-export const reducer = createReducer(
-  initialState,
-  on(CollectionPageActions.enter, (state) => ({
-    ...state,
-    loading: true,
-  })),
-  on(CollectionApiActions.loadBooksSuccess, (_state, { books }) => ({
-    loaded: true,
-    loading: false,
-    ids: books.map((book) => book.id),
-  })),
-  /**
-   * Optimistically add book to collection.
-   * If this succeeds there's nothing to do.
-   * If this fails we revert state by removing the book.
-   *
-   * `on` supports handling multiple types of actions
-   */
-  on(
-    SelectedBookPageActions.addBook,
-    CollectionApiActions.removeBookFailure,
-    (state, { book }) => {
-      if (state.ids.indexOf(book.id) > -1) {
-        return state;
+export const collectionFeature = createFeature({
+  name: 'booksCollection',
+  reducer: createReducer(
+    initialState,
+    on(CollectionPageActions.enter, (state) => ({
+      ...state,
+      loading: true,
+    })),
+    on(CollectionApiActions.loadBooksSuccess, (_state, { books }) => ({
+      loaded: true,
+      loading: false,
+      ids: books.map((book) => book.id),
+    })),
+    /**
+     * Optimistically add book to collection.
+     * If this succeeds there's nothing to do.
+     * If this fails we revert state by removing the book.
+     *
+     * `on` supports handling multiple types of actions
+     */
+    on(
+      SelectedBookPageActions.addBook,
+      CollectionApiActions.removeBookFailure,
+      (state, { book }) => {
+        if (state.ids.indexOf(book.id) > -1) {
+          return state;
+        }
+        return {
+          ...state,
+          ids: [...state.ids, book.id],
+        };
       }
-      return {
+    ),
+    /**
+     * Optimistically remove book from collection.
+     * If addBook fails, we "undo" adding the book.
+     */
+    on(
+      SelectedBookPageActions.removeBook,
+      CollectionApiActions.addBookFailure,
+      (state, { book }) => ({
         ...state,
-        ids: [...state.ids, book.id],
-      };
-    }
+        ids: state.ids.filter((id) => id !== book.id),
+      })
+    )
   ),
-  /**
-   * Optimistically remove book from collection.
-   * If addBook fails, we "undo" adding the book.
-   */
-  on(
-    SelectedBookPageActions.removeBook,
-    CollectionApiActions.addBookFailure,
-    (state, { book }) => ({
-      ...state,
-      ids: state.ids.filter((id) => id !== book.id),
-    })
-  )
-);
+});
 
-export const getLoaded = (state: State) => state.loaded;
+export const getLoaded = collectionFeature.selectLoaded;
 
-export const getLoading = (state: State) => state.loading;
+export const getLoading = collectionFeature.selectLoading;
 
-export const getIds = (state: State) => state.ids;
+export const getIds = collectionFeature.selectIds;
diff --git a/projects/example-app/src/app/books/reducers/index.ts b/projects/example-app/src/app/books/reducers/index.ts
index 03b35a12ca..2413d5768f 100644
--- a/projects/example-app/src/app/books/reducers/index.ts
+++ b/projects/example-app/src/app/books/reducers/index.ts
@@ -1,60 +1,36 @@
 import { Book } from '@example-app/books/models';
-import {
-  createSelector,
-  createFeatureSelector,
-  combineReducers,
-  Action,
-} from '@ngrx/store';
-import * as fromSearch from '@example-app/books/reducers/search.reducer';
+import { createSelector, provideState } from '@ngrx/store';
+import { searchFeature } from '@example-app/books/reducers/search.reducer';
 import * as fromBooks from '@example-app/books/reducers/books.reducer';
-import * as fromCollection from '@example-app/books/reducers/collection.reducer';
-import * as fromRoot from '@example-app/reducers';
-
-export const booksFeatureKey = 'books';
-
-export interface BooksState {
-  [fromSearch.searchFeatureKey]: fromSearch.State;
-  [fromBooks.booksFeatureKey]: fromBooks.State;
-  [fromCollection.collectionFeatureKey]: fromCollection.State;
-}
-
-export interface State extends fromRoot.State {
-  [booksFeatureKey]: BooksState;
-}
-
-/** Provide reducer in AoT-compilation happy way */
-export function reducers(state: BooksState | undefined, action: Action) {
-  return combineReducers({
-    [fromSearch.searchFeatureKey]: fromSearch.reducer,
-    [fromBooks.booksFeatureKey]: fromBooks.reducer,
-    [fromCollection.collectionFeatureKey]: fromCollection.reducer,
-  })(state, action);
-}
+import { booksFeature } from '@example-app/books/reducers/books.reducer';
+import { collectionFeature } from '@example-app/books/reducers/collection.reducer';
+import { makeEnvironmentProviders } from '@angular/core';
+import { provideEffects } from '@ngrx/effects';
+import { BookEffects, CollectionEffects } from '@example-app/books/effects';
+
+export const provideBooks = () =>
+  makeEnvironmentProviders([
+    provideState(booksFeature),
+    provideState(collectionFeature),
+    provideState(searchFeature),
+    provideEffects(BookEffects, CollectionEffects),
+  ]);
 
 /**
  * A selector function is a map function factory. We pass it parameters and it
  * returns a function that maps from the larger state tree into a smaller
- * piece of state. This selector simply selects the `books` state.
+ * piece of state.
  *
- * Selectors are used with the `select` operator.
+ * Selectors are used with the `select` or `selectSignal` operator.
  *
  * ```ts
  * class MyComponent {
  *   constructor(state$: Observable<State>) {
- *     this.booksState$ = state$.pipe(select(getBooksState));
+ *     this.booksState$ = state$.select(getBooksState);
  *   }
  * }
  * ```
- */
-
-/**
- * The createFeatureSelector function selects a piece of state from the root of the state object.
- * This is used for selecting feature states that are loaded eagerly or lazily.
- */
-export const selectBooksState =
-  createFeatureSelector<BooksState>(booksFeatureKey);
-
-/**
+ *
  * Every reducer module exports selector functions, however child reducers
  * have no knowledge of the overall state tree. To make them usable, we
  * need to make new selectors that wrap them.
@@ -63,15 +39,8 @@ export const selectBooksState =
  * only recompute when arguments change. The created selectors can also be composed
  * together to select different pieces of state.
  */
-export const selectBookEntitiesState = createSelector(
-  selectBooksState,
-  (state) => state.books
-);
 
-export const selectSelectedBookId = createSelector(
-  selectBookEntitiesState,
-  fromBooks.selectId
-);
+export const selectSelectedBookId = booksFeature.selectSelectedBookId;
 
 /**
  * Adapters created with @ngrx/entity generate
@@ -86,7 +55,7 @@ export const {
   selectEntities: selectBookEntities,
   selectAll: selectAllBooks,
   selectTotal: selectTotalBooks,
-} = fromBooks.adapter.getSelectors(selectBookEntitiesState);
+} = fromBooks.adapter.getSelectors(booksFeature.selectBooksState);
 
 export const selectSelectedBook = createSelector(
   selectBookEntities,
@@ -100,27 +69,11 @@ export const selectSelectedBook = createSelector(
  * Just like with the books selectors, we also have to compose the search
  * reducer's and collection reducer's selectors.
  */
-export const selectSearchState = createSelector(
-  selectBooksState,
-  (state) => state.search
-);
 
-export const selectSearchBookIds = createSelector(
-  selectSearchState,
-  fromSearch.getIds
-);
-export const selectSearchQuery = createSelector(
-  selectSearchState,
-  fromSearch.getQuery
-);
-export const selectSearchLoading = createSelector(
-  selectSearchState,
-  fromSearch.getLoading
-);
-export const selectSearchError = createSelector(
-  selectSearchState,
-  fromSearch.getError
-);
+export const selectSearchBookIds = searchFeature.selectIds;
+export const selectSearchQuery = searchFeature.selectQuery;
+export const selectSearchLoading = searchFeature.selectLoading;
+export const selectSearchError = searchFeature.selectError;
 
 /**
  * Some selector functions create joins across parts of state. This selector
@@ -136,23 +89,11 @@ export const selectSearchResults = createSelector(
   }
 );
 
-export const selectCollectionState = createSelector(
-  selectBooksState,
-  (state) => state.collection
-);
+export const selectCollectionLoaded = collectionFeature.selectLoaded;
 
-export const selectCollectionLoaded = createSelector(
-  selectCollectionState,
-  fromCollection.getLoaded
-);
-export const getCollectionLoading = createSelector(
-  selectCollectionState,
-  fromCollection.getLoading
-);
-export const selectCollectionBookIds = createSelector(
-  selectCollectionState,
-  fromCollection.getIds
-);
+export const getCollectionLoading = collectionFeature.selectLoading;
+
+export const selectCollectionBookIds = collectionFeature.selectIds;
 
 export const selectBookCollection = createSelector(
   selectBookEntities,
diff --git a/projects/example-app/src/app/books/reducers/search.reducer.ts b/projects/example-app/src/app/books/reducers/search.reducer.ts
index 7bd9eca7e8..826a8c9bd1 100644
--- a/projects/example-app/src/app/books/reducers/search.reducer.ts
+++ b/projects/example-app/src/app/books/reducers/search.reducer.ts
@@ -1,8 +1,6 @@
 import { BooksApiActions } from '@example-app/books/actions/books-api.actions';
 import { FindBookPageActions } from '@example-app/books/actions/find-book-page.actions';
-import { createReducer, on } from '@ngrx/store';
-
-export const searchFeatureKey = 'search';
+import { createFeature, createReducer, on } from '@ngrx/store';
 
 export interface State {
   ids: string[];
@@ -18,40 +16,43 @@ const initialState: State = {
   query: '',
 };
 
-export const reducer = createReducer(
-  initialState,
-  on(FindBookPageActions.searchBooks, (state, { query }) => {
-    return query === ''
-      ? {
-          ids: [],
-          loading: false,
-          error: '',
-          query,
-        }
-      : {
-          ...state,
-          loading: true,
-          error: '',
-          query,
-        };
-  }),
-  on(BooksApiActions.searchSuccess, (state, { books }) => ({
-    ids: books.map((book) => book.id),
-    loading: false,
-    error: '',
-    query: state.query,
-  })),
-  on(BooksApiActions.searchFailure, (state, { errorMsg }) => ({
-    ...state,
-    loading: false,
-    error: errorMsg,
-  }))
-);
-
-export const getIds = (state: State) => state.ids;
-
-export const getQuery = (state: State) => state.query;
-
-export const getLoading = (state: State) => state.loading;
-
-export const getError = (state: State) => state.error;
+export const searchFeature = createFeature({
+  name: 'booksSearch',
+  reducer: createReducer(
+    initialState,
+    on(FindBookPageActions.searchBooks, (state, { query }) => {
+      return query === ''
+        ? {
+            ids: [],
+            loading: false,
+            error: '',
+            query,
+          }
+        : {
+            ...state,
+            loading: true,
+            error: '',
+            query,
+          };
+    }),
+    on(BooksApiActions.searchSuccess, (state, { books }) => ({
+      ids: books.map((book) => book.id),
+      loading: false,
+      error: '',
+      query: state.query,
+    })),
+    on(BooksApiActions.searchFailure, (state, { errorMsg }) => ({
+      ...state,
+      loading: false,
+      error: errorMsg,
+    }))
+  ),
+});
+
+export const getIds = searchFeature.selectIds;
+
+export const getQuery = searchFeature.selectQuery;
+
+export const getLoading = searchFeature.selectLoading;
+
+export const getError = searchFeature.selectError;

From 8a5d3899c2ef49f7f36eb3b706951ba49e6467e8 Mon Sep 17 00:00:00 2001
From: Rainer Hahnekamp <rainer.hahnekamp@gmail.com>
Date: Wed, 18 Sep 2024 13:18:33 +0200
Subject: [PATCH 08/10] docs: first step towards signals

---
 .../app/core/components/nav-item.component.ts | 26 ++++++++++++-------
 .../app/core/components/sidenav.component.ts  | 15 ++++++++---
 .../app/core/components/toolbar.component.ts  |  4 +--
 .../src/app/core/containers/app.component.ts  | 21 ++++++++-------
 4 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/projects/example-app/src/app/core/components/nav-item.component.ts b/projects/example-app/src/app/core/components/nav-item.component.ts
index 07be91c743..691f52a7de 100644
--- a/projects/example-app/src/app/core/components/nav-item.component.ts
+++ b/projects/example-app/src/app/core/components/nav-item.component.ts
@@ -1,4 +1,11 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  input,
+  output,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { MaterialModule } from '@example-app/material';
 
@@ -7,11 +14,11 @@ import { MaterialModule } from '@example-app/material';
   selector: 'bc-nav-item',
   imports: [MaterialModule, RouterLink],
   template: `
-    <a mat-list-item [routerLink]="routerLink" (click)="navigate.emit()">
-      <mat-icon matListItemIcon>{{ icon }}</mat-icon>
+    <a mat-list-item [routerLink]="routerLink()" (click)="navigate.emit()">
+      <mat-icon matListItemIcon>{{ icon() }}</mat-icon>
       <div matListItemTitle><ng-content></ng-content></div>
-      @if (hint) {
-      <div matListItemLine>{{ hint }}</div>
+      @if (hint()) {
+      <div matListItemLine>{{ hint() }}</div>
       }
     </a>
   `,
@@ -24,8 +31,9 @@ import { MaterialModule } from '@example-app/material';
   ],
 })
 export class NavItemComponent {
-  @Input() icon = '';
-  @Input() hint = '';
-  @Input() routerLink: string | any[] = '/';
-  @Output() navigate = new EventEmitter<void>();
+  icon = input('');
+  hint = input('');
+  routerLink = input<string | unknown[]>('/');
+
+  navigate = output<void>();
 }
diff --git a/projects/example-app/src/app/core/components/sidenav.component.ts b/projects/example-app/src/app/core/components/sidenav.component.ts
index 702433fff2..98d797cc16 100644
--- a/projects/example-app/src/app/core/components/sidenav.component.ts
+++ b/projects/example-app/src/app/core/components/sidenav.component.ts
@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  input,
+  Input,
+  output,
+  Output,
+} from '@angular/core';
 import { MaterialModule } from '@example-app/material';
 
 @Component({
@@ -8,7 +15,7 @@ import { MaterialModule } from '@example-app/material';
   template: `
     <mat-sidenav
       #sidenav
-      [opened]="open"
+      [opened]="open()"
       (keydown.escape)="sidenav.close()"
       (closedStart)="closeMenu.emit()"
       disableClose
@@ -27,6 +34,6 @@ import { MaterialModule } from '@example-app/material';
   ],
 })
 export class SidenavComponent {
-  @Input() open = false;
-  @Output() closeMenu = new EventEmitter<void>();
+  open = input(false);
+  closeMenu = output<void>();
 }
diff --git a/projects/example-app/src/app/core/components/toolbar.component.ts b/projects/example-app/src/app/core/components/toolbar.component.ts
index d69fd96564..2588623631 100644
--- a/projects/example-app/src/app/core/components/toolbar.component.ts
+++ b/projects/example-app/src/app/core/components/toolbar.component.ts
@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, output } from '@angular/core';
 import { MaterialModule } from '@example-app/material';
 
 @Component({
@@ -15,5 +15,5 @@ import { MaterialModule } from '@example-app/material';
   `,
 })
 export class ToolbarComponent {
-  @Output() openMenu = new EventEmitter<void>();
+  openMenu = output<void>();
 }
diff --git a/projects/example-app/src/app/core/containers/app.component.ts b/projects/example-app/src/app/core/containers/app.component.ts
index 56f285d4e6..d1c8b7a392 100644
--- a/projects/example-app/src/app/core/containers/app.component.ts
+++ b/projects/example-app/src/app/core/containers/app.component.ts
@@ -31,8 +31,8 @@ import { selectShowSidenav } from '../reducers/layout.reducer';
   ],
   template: `
     <bc-layout>
-      <bc-sidenav [open]="(showSidenav$ | async)!" (closeMenu)="closeSidenav()">
-        @if (loggedIn$ | async) {
+      <bc-sidenav [open]="showSidenav()" (closeMenu)="closeSidenav()">
+        @if (loggedIn()) {
         <bc-nav-item
           (navigate)="closeSidenav()"
           routerLink="/"
@@ -41,7 +41,6 @@ import { selectShowSidenav } from '../reducers/layout.reducer';
         >
           My Collection
         </bc-nav-item>
-        } @if (loggedIn$ | async) {
         <bc-nav-item
           (navigate)="closeSidenav()"
           routerLink="/books/find"
@@ -50,13 +49,13 @@ import { selectShowSidenav } from '../reducers/layout.reducer';
         >
           Browse Books
         </bc-nav-item>
-        } @if ((loggedIn$ | async) === false) {
-        <bc-nav-item (navigate)="closeSidenav()"> Sign In </bc-nav-item>
-        } @if (loggedIn$ | async) {
-        <bc-nav-item (navigate)="logout()"> Sign Out </bc-nav-item>
+        } @if (!loggedIn()) {
+        <bc-nav-item (navigate)="closeSidenav()"> Sign In</bc-nav-item>
+        } @if (loggedIn()) {
+        <bc-nav-item (navigate)="logout()"> Sign Out</bc-nav-item>
         }
       </bc-sidenav>
-      <bc-toolbar (openMenu)="openSidenav()"> Book Collection </bc-toolbar>
+      <bc-toolbar (openMenu)="openSidenav()"> Book Collection</bc-toolbar>
 
       <router-outlet></router-outlet>
     </bc-layout>
@@ -69,8 +68,10 @@ export class AppComponent {
    * Selectors can be applied with the `select` operator which passes the state
    * tree to the provided selector
    */
-  protected readonly showSidenav$ = this.store.select(selectShowSidenav);
-  protected readonly loggedIn$ = this.store.select(fromAuth.selectLoggedIn);
+  protected readonly showSidenav = this.store.selectSignal(selectShowSidenav);
+  protected readonly loggedIn = this.store.selectSignal(
+    fromAuth.selectLoggedIn
+  );
 
   closeSidenav() {
     /**

From d6cc1c77b0b7c32aa01b1e1cba0dba1de0cd7d51 Mon Sep 17 00:00:00 2001
From: Rainer Hahnekamp <rainer.hahnekamp@gmail.com>
Date: Sun, 29 Sep 2024 22:34:34 +0200
Subject: [PATCH 09/10] feat: finalize migration to Signals

---
 projects/example-app/src/app/app.config.ts    |  8 ++-
 projects/example-app/src/app/app.routing.ts   |  6 +-
 .../example-app/src/app/auth/auth.routes.ts   |  4 +-
 .../login-form.component.spec.ts.snap         | 38 ++++++----
 .../components/login-form.component.spec.ts   |  5 +-
 .../auth/components/login-form.component.ts   | 34 +++++----
 .../login-page.component.spec.ts.snap         |  6 +-
 .../containers/login-page.component.spec.ts   |  2 +-
 .../auth/containers/login-page.component.ts   | 13 ++--
 .../example-app/src/app/books/books.routes.ts |  4 +-
 .../components/book-authors.component.ts      | 12 ++--
 .../books/components/book-detail.component.ts | 71 ++++++++-----------
 .../components/book-preview-list.component.ts |  6 +-
 .../books/components/book-search.component.ts | 25 ++++---
 .../collection-page.component.spec.ts.snap    |  4 +-
 .../find-book-page.component.spec.ts.snap     | 10 +--
 .../view-book-page.component.spec.ts.snap     | 10 ++-
 .../containers/collection-page.component.ts   | 11 ++-
 .../containers/find-book-page.component.ts    | 27 +++----
 .../selected-book-page.component.spec.ts      |  6 --
 .../selected-book-page.component.ts           | 16 ++---
 .../view-book-page.component.spec.ts          | 54 ++++++++------
 .../containers/view-book-page.component.ts    | 23 +++---
 23 files changed, 209 insertions(+), 186 deletions(-)

diff --git a/projects/example-app/src/app/app.config.ts b/projects/example-app/src/app/app.config.ts
index 092037f64c..1c431140e8 100644
--- a/projects/example-app/src/app/app.config.ts
+++ b/projects/example-app/src/app/app.config.ts
@@ -11,7 +11,11 @@ import { rootReducers, metaReducers } from '@example-app/reducers';
 
 import { APP_ROUTES } from '@example-app/app.routing';
 import { UserEffects, RouterEffects } from '@example-app/core/effects';
-import { provideRouter, withHashLocation } from '@angular/router';
+import {
+  provideRouter,
+  withComponentInputBinding,
+  withHashLocation,
+} from '@angular/router';
 import { AuthEffects } from './auth/effects';
 import { provideAuth } from '@example-app/auth/reducers';
 import { provideLayout } from '@example-app/core/reducers/layout.reducer';
@@ -20,7 +24,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideAnimationsAsync(),
     provideHttpClient(),
-    provideRouter(APP_ROUTES, withHashLocation()),
+    provideRouter(APP_ROUTES, withHashLocation(), withComponentInputBinding()),
 
     /**
      * provideStore() is imported once in the root providers, accepting a reducer
diff --git a/projects/example-app/src/app/app.routing.ts b/projects/example-app/src/app/app.routing.ts
index d4606d572a..911c3ed7aa 100644
--- a/projects/example-app/src/app/app.routing.ts
+++ b/projects/example-app/src/app/app.routing.ts
@@ -6,14 +6,12 @@ import { NotFoundPageComponent } from '@example-app/core/containers';
 export const APP_ROUTES: Routes = [
   {
     path: 'login',
-    loadChildren: () =>
-      import('@example-app/auth/auth.routes').then((m) => m.AUTH_ROUTES),
+    loadChildren: () => import('@example-app/auth/auth.routes'),
   },
   { path: '', redirectTo: '/books', pathMatch: 'full' },
   {
     path: 'books',
-    loadChildren: () =>
-      import('@example-app/books/books.routes').then((m) => m.BOOKS_ROUTES),
+    loadChildren: () => import('@example-app/books/books.routes'),
     canActivate: [authGuard],
   },
   {
diff --git a/projects/example-app/src/app/auth/auth.routes.ts b/projects/example-app/src/app/auth/auth.routes.ts
index 7197a2c553..4cc736f9f9 100644
--- a/projects/example-app/src/app/auth/auth.routes.ts
+++ b/projects/example-app/src/app/auth/auth.routes.ts
@@ -1,10 +1,10 @@
 import { Routes } from '@angular/router';
 import { LoginPageComponent } from '@example-app/auth/containers';
 
-export const AUTH_ROUTES: Routes = [
+export default [
   {
     path: '',
     component: LoginPageComponent,
     data: { title: 'Login' },
   },
-];
+] satisfies Routes;
diff --git a/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap b/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
index c2ca2be6f1..3e06030902 100644
--- a/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
+++ b/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
@@ -2,9 +2,11 @@
 
 exports[`Login Page should compile 1`] = `
 <bc-login-form
-  errorMessage="null"
+  errorMessage={[Function Function]}
   form={[Function FormGroup]}
-  submitted={[Function EventEmitter_]}
+  pending={[Function Function]}
+  pendingEffect={[Function EffectHandle]}
+  submitted={[Function OutputEmitterRef]}
 >
   <mat-card
     class="mat-mdc-card mdc-card"
@@ -149,9 +151,11 @@ exports[`Login Page should compile 1`] = `
 
 exports[`Login Page should disable the form if pending 1`] = `
 <bc-login-form
-  errorMessage="null"
+  errorMessage={[Function Function]}
   form={[Function FormGroup]}
-  submitted={[Function EventEmitter_]}
+  pending={[Function Function]}
+  pendingEffect={[Function EffectHandle]}
+  submitted={[Function OutputEmitterRef]}
 >
   <mat-card
     class="mat-mdc-card mdc-card"
@@ -165,16 +169,19 @@ exports[`Login Page should disable the form if pending 1`] = `
       class="mat-mdc-card-content"
     >
       <form
-        class="ng-untouched ng-pristine"
+        class="ng-untouched ng-pristine ng-valid"
         novalidate=""
       >
         <p>
           <mat-form-field
-            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-disabled mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine"
+            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine ng-valid"
           >
             <div
-              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label mdc-text-field--disabled"
+              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label"
             >
+              <div
+                class="mat-mdc-form-field-focus-overlay"
+              />
               <div
                 class="mat-mdc-form-field-flex"
               >
@@ -184,7 +191,7 @@ exports[`Login Page should disable the form if pending 1`] = `
                   <input
                     aria-invalid="false"
                     aria-required="false"
-                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine cdk-text-field-autofill-monitored"
+                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
                     data-testid="username"
                     disabled=""
                     formcontrolname="username"
@@ -215,11 +222,14 @@ exports[`Login Page should disable the form if pending 1`] = `
         </p>
         <p>
           <mat-form-field
-            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-disabled mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine"
+            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine ng-valid"
           >
             <div
-              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label mdc-text-field--disabled"
+              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label"
             >
+              <div
+                class="mat-mdc-form-field-focus-overlay"
+              />
               <div
                 class="mat-mdc-form-field-flex"
               >
@@ -229,7 +239,7 @@ exports[`Login Page should disable the form if pending 1`] = `
                   <input
                     aria-invalid="false"
                     aria-required="false"
-                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine cdk-text-field-autofill-monitored"
+                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
                     data-testid="password"
                     disabled=""
                     formcontrolname="password"
@@ -292,9 +302,11 @@ exports[`Login Page should disable the form if pending 1`] = `
 
 exports[`Login Page should display an error message if provided 1`] = `
 <bc-login-form
-  errorMessage={[Function String]}
+  errorMessage={[Function Function]}
   form={[Function FormGroup]}
-  submitted={[Function EventEmitter_]}
+  pending={[Function Function]}
+  pendingEffect={[Function EffectHandle]}
+  submitted={[Function OutputEmitterRef]}
 >
   <mat-card
     class="mat-mdc-card mdc-card"
diff --git a/projects/example-app/src/app/auth/components/login-form.component.spec.ts b/projects/example-app/src/app/auth/components/login-form.component.spec.ts
index 60fef8dcfd..5931924e0b 100644
--- a/projects/example-app/src/app/auth/components/login-form.component.spec.ts
+++ b/projects/example-app/src/app/auth/components/login-form.component.spec.ts
@@ -16,6 +16,7 @@ describe('Login Page', () => {
     });
 
     fixture = TestBed.createComponent(LoginFormComponent);
+    fixture.componentRef.setInput('pending', false);
     instance = fixture.componentInstance;
   });
 
@@ -38,7 +39,7 @@ describe('Login Page', () => {
   });
 
   it('should disable the form if pending', () => {
-    instance.pending = true;
+    fixture.componentRef.setInput('pending', true);
 
     fixture.detectChanges();
 
@@ -46,7 +47,7 @@ describe('Login Page', () => {
   });
 
   it('should display an error message if provided', () => {
-    instance.errorMessage = 'Invalid credentials';
+    fixture.componentRef.setInput('errorMessage', 'Invalid credentials');
 
     fixture.detectChanges();
 
diff --git a/projects/example-app/src/app/auth/components/login-form.component.ts b/projects/example-app/src/app/auth/components/login-form.component.ts
index 00d36064c8..13078227f9 100644
--- a/projects/example-app/src/app/auth/components/login-form.component.ts
+++ b/projects/example-app/src/app/auth/components/login-form.component.ts
@@ -1,4 +1,13 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  input,
+  untracked,
+  effect,
+  output,
+} from '@angular/core';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Credentials } from '@example-app/auth/models';
 import { MaterialModule } from '@example-app/material';
@@ -36,9 +45,9 @@ import { MaterialModule } from '@example-app/material';
             </mat-form-field>
           </p>
 
-          @if (errorMessage) {
+          @if (errorMessage()) {
           <p class="login-error">
-            {{ errorMessage }}
+            {{ errorMessage() }}
           </p>
           }
 
@@ -87,18 +96,17 @@ import { MaterialModule } from '@example-app/material';
   ],
 })
 export class LoginFormComponent {
-  @Input()
-  set pending(isPending: boolean) {
-    if (isPending) {
-      this.form.disable();
-    } else {
-      this.form.enable();
-    }
-  }
+  readonly pending = input.required<boolean>();
+
+  private readonly pendingEffect = effect(() => {
+    const pending = this.pending();
+
+    untracked(() => (pending ? this.form.disable() : this.form.enable()));
+  });
 
-  @Input() errorMessage: string | null = null;
+  readonly errorMessage = input<string | null>(null);
 
-  @Output() submitted = new EventEmitter<Credentials>();
+  submitted = output<Credentials>();
 
   protected readonly form: FormGroup = new FormGroup({
     username: new FormControl('ngrx'),
diff --git a/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap b/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
index 99553aa0f8..c659122c08 100644
--- a/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
+++ b/projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
@@ -2,9 +2,9 @@
 
 exports[`Login Page should compile 1`] = `
 <bc-login-page
-  error$={[Function _Store]}
-  pending$={[Function _Store]}
-  store={[Function _MockStore]}
+  error={[Function Function]}
+  pending={[Function Function]}
+  store={[Function MockStore]}
 >
   <bc-login-form>
     <mat-card
diff --git a/projects/example-app/src/app/auth/containers/login-page.component.spec.ts b/projects/example-app/src/app/auth/containers/login-page.component.spec.ts
index 7f367b213f..1d49bd8e0d 100644
--- a/projects/example-app/src/app/auth/containers/login-page.component.spec.ts
+++ b/projects/example-app/src/app/auth/containers/login-page.component.spec.ts
@@ -52,7 +52,7 @@ describe('Login Page', () => {
   });
 
   it('should dispatch a login event on submit', () => {
-    const credentials: any = {};
+    const credentials = { username: 'ngrx', password: 'rocks' };
     const action = LoginPageActions.login({ credentials });
 
     instance.onSubmit(credentials);
diff --git a/projects/example-app/src/app/auth/containers/login-page.component.ts b/projects/example-app/src/app/auth/containers/login-page.component.ts
index 6922102b5c..f1d0ff4f05 100644
--- a/projects/example-app/src/app/auth/containers/login-page.component.ts
+++ b/projects/example-app/src/app/auth/containers/login-page.component.ts
@@ -13,20 +13,21 @@ import { AsyncPipe } from '@angular/common';
   template: `
     <bc-login-form
       (submitted)="onSubmit($event)"
-      [pending]="(pending$ | async)!"
-      [errorMessage]="error$ | async"
+      [pending]="pending()"
+      [errorMessage]="error()"
     >
     </bc-login-form>
   `,
-  styles: [],
 })
 export class LoginPageComponent {
-  private store = inject(Store);
+  private readonly store = inject(Store);
 
-  protected readonly pending$ = this.store.select(
+  protected readonly pending = this.store.selectSignal(
     fromAuth.selectLoginPagePending
   );
-  protected readonly error$ = this.store.select(fromAuth.selectLoginPageError);
+  protected readonly error = this.store.selectSignal(
+    fromAuth.selectLoginPageError
+  );
 
   onSubmit(credentials: Credentials) {
     this.store.dispatch(LoginPageActions.login({ credentials }));
diff --git a/projects/example-app/src/app/books/books.routes.ts b/projects/example-app/src/app/books/books.routes.ts
index ce2f4c64bc..03e99402bf 100644
--- a/projects/example-app/src/app/books/books.routes.ts
+++ b/projects/example-app/src/app/books/books.routes.ts
@@ -8,7 +8,7 @@ import {
 import { bookExistsGuard } from '@example-app/books/guards';
 import { provideBooks } from '@example-app/books/reducers';
 
-export const BOOKS_ROUTES: Routes = [
+export default [
   {
     path: '',
     providers: [provideBooks()],
@@ -31,4 +31,4 @@ export const BOOKS_ROUTES: Routes = [
       },
     ],
   },
-];
+] satisfies Routes;
diff --git a/projects/example-app/src/app/books/components/book-authors.component.ts b/projects/example-app/src/app/books/components/book-authors.component.ts
index 363b1a5dae..f2e48981d4 100644
--- a/projects/example-app/src/app/books/components/book-authors.component.ts
+++ b/projects/example-app/src/app/books/components/book-authors.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, computed, input, Input } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
 import { MaterialModule } from '@example-app/material';
@@ -11,7 +11,7 @@ import { AddCommasPipe } from '@example-app/shared/pipes/add-commas.pipe';
   template: `
     <h5 mat-subheader>Written By:</h5>
     <span>
-      {{ authors | bcAddCommas }}
+      {{ authors() | bcAddCommas }}
     </span>
   `,
   styles: [
@@ -23,9 +23,9 @@ import { AddCommasPipe } from '@example-app/shared/pipes/add-commas.pipe';
   ],
 })
 export class BookAuthorsComponent {
-  @Input() book: Book | undefined = undefined;
+  book = input<Book>();
 
-  get authors() {
-    return this.book?.volumeInfo.authors || [];
-  }
+  protected readonly authors = computed(
+    () => this.book()?.volumeInfo.authors || []
+  );
 }
diff --git a/projects/example-app/src/app/books/components/book-detail.component.ts b/projects/example-app/src/app/books/components/book-detail.component.ts
index 3a9918c0d5..eb49b10f02 100644
--- a/projects/example-app/src/app/books/components/book-detail.component.ts
+++ b/projects/example-app/src/app/books/components/book-detail.component.ts
@@ -1,4 +1,12 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  Component,
+  computed,
+  EventEmitter,
+  input,
+  Input,
+  output,
+  Output,
+} from '@angular/core';
 
 import { Book } from '@example-app/books/models';
 import { MaterialModule } from '@example-app/material';
@@ -9,35 +17,34 @@ import { BookAuthorsComponent } from './book-authors.component';
   selector: 'bc-book-detail',
   imports: [MaterialModule, BookAuthorsComponent],
   template: `
-    @if (book) {
+    @let value = book(); @let volumeInfo = book().volumeInfo;
     <mat-card>
       <mat-card-title-group>
-        <mat-card-title>{{ title }}</mat-card-title>
-        @if (subtitle) {
-        <mat-card-subtitle>{{ subtitle }}</mat-card-subtitle>
-        } @if (thumbnail) {
-        <img mat-card-sm-image [src]="thumbnail" />
+        <mat-card-title>{{ volumeInfo.title }}</mat-card-title>
+        @if (volumeInfo.subtitle) {
+        <mat-card-subtitle>{{ volumeInfo.subtitle }}</mat-card-subtitle>
+        } @if (thumbnail()) {
+        <img mat-card-sm-image [src]="thumbnail()" />
         }
       </mat-card-title-group>
       <mat-card-content>
-        <p [innerHtml]="description"></p>
+        <p [innerHtml]="volumeInfo.description"></p>
       </mat-card-content>
       <mat-card-footer class="footer">
-        <bc-book-authors [book]="book"></bc-book-authors>
+        <bc-book-authors [book]="value"></bc-book-authors>
       </mat-card-footer>
       <mat-card-actions align="start">
-        @if (inCollection) {
-        <button mat-raised-button color="warn" (click)="remove.emit(book)">
+        @if (inCollection()) {
+        <button mat-raised-button color="warn" (click)="remove.emit(value)">
           Remove Book from Collection
         </button>
-        } @if (!inCollection) {
-        <button mat-raised-button color="primary" (click)="add.emit(book)">
+        } @else {
+        <button mat-raised-button color="primary" (click)="add.emit(value)">
           Add Book to Collection
         </button>
         }
       </mat-card-actions>
     </mat-card>
-    }
   `,
   styles: [
     `
@@ -71,38 +78,20 @@ import { BookAuthorsComponent } from './book-authors.component';
 })
 export class BookDetailComponent {
   /**
-   * Presentational components receive data through @Input() and communicate events
-   * through @Output() but generally maintain no internal state of their
+   * Presentational components receive data through input and communicate events
+   * through output but generally maintain no internal state of their
    * own. All decisions are delegated to 'container', or 'smart'
    * components before data updates flow back down.
    *
    * More on 'smart' and 'presentational' components: https://gist.github.com/btroncone/a6e4347326749f938510#utilizing-container-components
    */
-  @Input() book: Book | undefined = undefined;
-  @Input() inCollection = false;
-  @Output() add = new EventEmitter<Book>();
-  @Output() remove = new EventEmitter<Book>();
+  readonly book = input.required<Book>();
+  readonly inCollection = input(false);
 
-  /**
-   * Tip: Utilize getters to keep templates clean
-   */
-  get id() {
-    return this.book?.id;
-  }
-
-  get title() {
-    return this.book?.volumeInfo.title;
-  }
-
-  get subtitle() {
-    return this.book?.volumeInfo.subtitle;
-  }
-
-  get description() {
-    return this.book?.volumeInfo.description;
-  }
+  readonly add = output<Book>();
+  readonly remove = output<Book>();
 
-  get thumbnail() {
-    return this.book?.volumeInfo.imageLinks.smallThumbnail.replace('http:', '');
-  }
+  protected readonly thumbnail = computed(() =>
+    this.book().volumeInfo.imageLinks.smallThumbnail.replace('http:', '')
+  );
 }
diff --git a/projects/example-app/src/app/books/components/book-preview-list.component.ts b/projects/example-app/src/app/books/components/book-preview-list.component.ts
index 5884a5c4bc..63f36c9d09 100644
--- a/projects/example-app/src/app/books/components/book-preview-list.component.ts
+++ b/projects/example-app/src/app/books/components/book-preview-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input, Input } from '@angular/core';
 
 import { Book } from '@example-app/books/models';
 import { BookPreviewComponent } from './book-preview.component';
@@ -8,7 +8,7 @@ import { BookPreviewComponent } from './book-preview.component';
   selector: 'bc-book-preview-list',
   imports: [BookPreviewComponent],
   template: `
-    @for (book of books; track book) {
+    @for (book of books(); track book) {
     <bc-book-preview [book]="book"></bc-book-preview>
     }
   `,
@@ -23,5 +23,5 @@ import { BookPreviewComponent } from './book-preview.component';
   ],
 })
 export class BookPreviewListComponent {
-  @Input() books = new Array<Book>();
+  readonly books = input(new Array<Book>());
 }
diff --git a/projects/example-app/src/app/books/components/book-search.component.ts b/projects/example-app/src/app/books/components/book-search.component.ts
index fe04c89b8d..662d461d2d 100644
--- a/projects/example-app/src/app/books/components/book-search.component.ts
+++ b/projects/example-app/src/app/books/components/book-search.component.ts
@@ -1,4 +1,11 @@
-import { Component, Output, Input, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Output,
+  Input,
+  EventEmitter,
+  output,
+  input,
+} from '@angular/core';
 import { MaterialModule } from '@example-app/material';
 
 @Component({
@@ -13,19 +20,19 @@ import { MaterialModule } from '@example-app/material';
           <input
             matInput
             placeholder="Search for a book"
-            [value]="query"
+            [value]="query()"
             (keyup)="onSearch($event)"
           />
         </mat-form-field>
         <mat-spinner
-          [class.show]="searching"
+          [class.show]="searching()"
           [diameter]="30"
           [strokeWidth]="3"
         ></mat-spinner>
       </mat-card-content>
       <mat-card-footer>
-        @if (error) {
-        <span>{{ error }}</span>
+        @if (error()) {
+        <span>{{ error() }}</span>
         }
       </mat-card-footer>
     </mat-card>
@@ -67,10 +74,10 @@ import { MaterialModule } from '@example-app/material';
   ],
 })
 export class BookSearchComponent {
-  @Input() query = '';
-  @Input() searching = false;
-  @Input() error = '';
-  @Output() search = new EventEmitter<string>();
+  readonly query = input('');
+  readonly searching = input(false);
+  readonly error = input('');
+  protected search = output<string>();
 
   onSearch(event: KeyboardEvent): void {
     this.search.emit((event.target as HTMLInputElement).value);
diff --git a/projects/example-app/src/app/books/containers/__snapshots__/collection-page.component.spec.ts.snap b/projects/example-app/src/app/books/containers/__snapshots__/collection-page.component.spec.ts.snap
index c675f5ac0b..a7deede9c7 100644
--- a/projects/example-app/src/app/books/containers/__snapshots__/collection-page.component.spec.ts.snap
+++ b/projects/example-app/src/app/books/containers/__snapshots__/collection-page.component.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`Collection Page should compile 1`] = `
 <bc-collection-page
-  books$={[Function _Store]}
-  store={[Function _MockStore]}
+  books={[Function Function]}
+  store={[Function MockStore]}
 >
   <mat-card
     class="mat-mdc-card mdc-card"
diff --git a/projects/example-app/src/app/books/containers/__snapshots__/find-book-page.component.spec.ts.snap b/projects/example-app/src/app/books/containers/__snapshots__/find-book-page.component.spec.ts.snap
index 39bfecfa64..cd319a3f51 100644
--- a/projects/example-app/src/app/books/containers/__snapshots__/find-book-page.component.spec.ts.snap
+++ b/projects/example-app/src/app/books/containers/__snapshots__/find-book-page.component.spec.ts.snap
@@ -2,11 +2,11 @@
 
 exports[`Find Book Page should compile 1`] = `
 <bc-find-book-page
-  books$={[Function _Store]}
-  error$={[Function _Store]}
-  loading$={[Function _Store]}
-  searchQuery$={[Function _Store]}
-  store={[Function _MockStore]}
+  books={[Function Function]}
+  error={[Function Function]}
+  loading={[Function Function]}
+  searchQuery={[Function Function]}
+  store={[Function MockStore]}
 >
   <bc-book-search>
     <mat-card
diff --git a/projects/example-app/src/app/books/containers/__snapshots__/view-book-page.component.spec.ts.snap b/projects/example-app/src/app/books/containers/__snapshots__/view-book-page.component.spec.ts.snap
index 006c0c7d02..26d1364042 100644
--- a/projects/example-app/src/app/books/containers/__snapshots__/view-book-page.component.spec.ts.snap
+++ b/projects/example-app/src/app/books/containers/__snapshots__/view-book-page.component.spec.ts.snap
@@ -2,12 +2,10 @@
 
 exports[`View Book Page should compile 1`] = `
 <bc-view-book-page
-  actionsSubscription={[Function SafeSubscriber]}
-  store={[Function _MockStore]}
+  id={[Function Function]}
+  selectBookEffect={[Function EffectHandle]}
+  store={[Function Object]}
 >
-  <bc-selected-book-page>
-    <bc-book-detail>
-    </bc-book-detail>
-  </bc-selected-book-page>
+  <bc-selected-book-page />
 </bc-view-book-page>
 `;
diff --git a/projects/example-app/src/app/books/containers/collection-page.component.ts b/projects/example-app/src/app/books/containers/collection-page.component.ts
index 68a2de7d60..95cf7df4e5 100644
--- a/projects/example-app/src/app/books/containers/collection-page.component.ts
+++ b/projects/example-app/src/app/books/containers/collection-page.component.ts
@@ -6,26 +6,23 @@ import {
 } from '@angular/core';
 
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
 
 import { CollectionPageActions } from '@example-app/books/actions/collection-page.actions';
-import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
 import { MaterialModule } from '@example-app/material';
 import { BookPreviewListComponent } from '../components';
-import { AsyncPipe } from '@angular/common';
 
 @Component({
   standalone: true,
   selector: 'bc-collection-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MaterialModule, BookPreviewListComponent, AsyncPipe],
+  imports: [MaterialModule, BookPreviewListComponent],
   template: `
     <mat-card>
       <mat-card-title>My Collection</mat-card-title>
     </mat-card>
 
-    <bc-book-preview-list [books]="(books$ | async)!"></bc-book-preview-list>
+    <bc-book-preview-list [books]="books()"></bc-book-preview-list>
   `,
   /**
    * Container components are permitted to have just enough styles
@@ -46,7 +43,9 @@ import { AsyncPipe } from '@angular/common';
 export class CollectionPageComponent implements OnInit {
   private readonly store = inject(Store);
 
-  protected books$ = this.store.select(fromBooks.selectBookCollection);
+  protected readonly books = this.store.selectSignal(
+    fromBooks.selectBookCollection
+  );
 
   ngOnInit() {
     this.store.dispatch(CollectionPageActions.enter());
diff --git a/projects/example-app/src/app/books/containers/find-book-page.component.ts b/projects/example-app/src/app/books/containers/find-book-page.component.ts
index 2b283b9ecd..ac8420d66a 100644
--- a/projects/example-app/src/app/books/containers/find-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/find-book-page.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 import { Store } from '@ngrx/store';
-import { take } from 'rxjs/operators';
 
 import { FindBookPageActions } from '@example-app/books/actions/find-book-page.actions';
 import * as fromBooks from '@example-app/books/reducers';
@@ -15,26 +14,30 @@ import { AsyncPipe } from '@angular/common';
   imports: [BookSearchComponent, AsyncPipe, BookPreviewListComponent],
   template: `
     <bc-book-search
-      [query]="(searchQuery$ | async)!"
-      [searching]="(loading$ | async)!"
-      [error]="(error$ | async)!"
+      [query]="searchQuery()"
+      [searching]="loading()"
+      [error]="error()"
       (search)="search($event)"
     >
     </bc-book-search>
-    <bc-book-preview-list [books]="(books$ | async)!"></bc-book-preview-list>
+    <bc-book-preview-list [books]="books()"></bc-book-preview-list>
   `,
 })
 export class FindBookPageComponent {
-  private store = inject(Store);
+  private readonly store = inject(Store);
 
-  protected readonly searchQuery$ = this.store
-    .select(fromBooks.selectSearchQuery)
-    .pipe(take(1));
-  protected readonly books$ = this.store.select(fromBooks.selectSearchResults);
-  protected readonly loading$ = this.store.select(
+  protected readonly searchQuery = this.store.selectSignal(
+    fromBooks.selectSearchQuery
+  );
+  protected readonly books = this.store.selectSignal(
+    fromBooks.selectSearchResults
+  );
+  protected readonly loading = this.store.selectSignal(
     fromBooks.selectSearchLoading
   );
-  protected readonly error$ = this.store.select(fromBooks.selectSearchError);
+  protected readonly error = this.store.selectSignal(
+    fromBooks.selectSearchError
+  );
 
   search(query: string) {
     this.store.dispatch(FindBookPageActions.searchBooks({ query }));
diff --git a/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts b/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts
index a5c93a5232..87a3be6c32 100644
--- a/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts
+++ b/projects/example-app/src/app/books/containers/selected-book-page.component.spec.ts
@@ -26,12 +26,6 @@ describe('Selected Book Page', () => {
     jest.spyOn(store, 'dispatch');
   });
 
-  it('should compile', () => {
-    fixture.detectChanges();
-
-    expect(fixture).toMatchSnapshot();
-  });
-
   it('should dispatch a collection.AddBook action when addToCollection is called', () => {
     const $event: Book = generateMockBook();
     const action = SelectedBookPageActions.addBook({ book: $event });
diff --git a/projects/example-app/src/app/books/containers/selected-book-page.component.ts b/projects/example-app/src/app/books/containers/selected-book-page.component.ts
index 9f1fcde8ed..4ecef3e8da 100644
--- a/projects/example-app/src/app/books/containers/selected-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/selected-book-page.component.ts
@@ -1,36 +1,36 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
 
 import { SelectedBookPageActions } from '@example-app/books/actions/selected-book-page.actions';
 import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
 import { BookDetailComponent } from '../components';
-import { AsyncPipe } from '@angular/common';
 
 @Component({
   standalone: true,
   selector: 'bc-selected-book-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [BookDetailComponent, AsyncPipe],
+  imports: [BookDetailComponent],
   template: `
+    @let value = book(); @if (value) {
     <bc-book-detail
-      [book]="(book$ | async)!"
-      [inCollection]="(isSelectedBookInCollection$ | async)!"
+      [book]="value"
+      [inCollection]="isSelectedBookInCollection()"
       (add)="addToCollection($event)"
       (remove)="removeFromCollection($event)"
     >
     </bc-book-detail>
+    }
   `,
 })
 export class SelectedBookPageComponent {
   private readonly store = inject(Store);
 
-  protected readonly book$ = this.store.select(
+  protected readonly book = this.store.selectSignal(
     fromBooks.selectSelectedBook
-  ) as Observable<Book>;
-  protected readonly isSelectedBookInCollection$ = this.store.select(
+  );
+  protected readonly isSelectedBookInCollection = this.store.selectSignal(
     fromBooks.isSelectedBookInCollection
   );
 
diff --git a/projects/example-app/src/app/books/containers/view-book-page.component.spec.ts b/projects/example-app/src/app/books/containers/view-book-page.component.spec.ts
index e1ace22b50..b5e6a0a357 100644
--- a/projects/example-app/src/app/books/containers/view-book-page.component.spec.ts
+++ b/projects/example-app/src/app/books/containers/view-book-page.component.spec.ts
@@ -1,46 +1,54 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 
-import { provideMockStore, MockStore } from '@ngrx/store/testing';
-import { BehaviorSubject } from 'rxjs';
-
 import { ViewBookPageComponent } from '@example-app/books/containers';
 import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.actions';
+import { Store } from '@ngrx/store';
+import { Component } from '@angular/core';
 
-describe('View Book Page', () => {
-  let fixture: ComponentFixture<ViewBookPageComponent>;
-  let store: MockStore;
-  let route: ActivatedRoute;
+@Component({
+  selector: 'bc-selected-book-page',
+  template: '',
+  standalone: true,
+})
+class MockSelectedBookPageComponent {}
 
-  beforeEach(() => {
+describe('View Book Page', () => {
+  const setup = () => {
+    const store = {
+      dispatch: jest.fn(),
+      selectSignal: jest.fn(),
+    };
+    TestBed.overrideComponent(ViewBookPageComponent, {
+      set: { imports: [MockSelectedBookPageComponent] },
+    });
     TestBed.configureTestingModule({
       imports: [ViewBookPageComponent],
-      providers: [
-        {
-          provide: ActivatedRoute,
-          useValue: { params: new BehaviorSubject({}) },
-        },
-        provideMockStore(),
-      ],
+      providers: [{ provide: Store, useValue: store }],
     });
 
-    fixture = TestBed.createComponent(ViewBookPageComponent);
-    store = TestBed.inject(MockStore);
-    route = TestBed.inject(ActivatedRoute);
+    const fixture = TestBed.createComponent(ViewBookPageComponent);
 
-    jest.spyOn(store, 'dispatch');
-  });
+    const dispatchSpy = store.dispatch;
+    const selectSpy = store.selectSignal;
+
+    return { store, fixture };
+  };
 
   it('should compile', () => {
+    const { fixture } = setup();
+    fixture.componentRef.setInput('id', '2');
     fixture.detectChanges();
 
     expect(fixture).toMatchSnapshot();
   });
 
-  it('should dispatch a book.Select action on init', () => {
-    const action = ViewBookPageActions.selectBook({ id: '2' });
+  it('should dispatch a book. Select action on init', () => {
+    const { fixture, store } = setup();
 
-    (route.params as BehaviorSubject<any>).next({ id: '2' });
+    const action = ViewBookPageActions.selectBook({ id: '2' });
+    fixture.componentRef.setInput('id', '2');
+    fixture.detectChanges();
 
     expect(store.dispatch).toHaveBeenLastCalledWith(action);
   });
diff --git a/projects/example-app/src/app/books/containers/view-book-page.component.ts b/projects/example-app/src/app/books/containers/view-book-page.component.ts
index df288f1917..a4c6ef514a 100644
--- a/projects/example-app/src/app/books/containers/view-book-page.component.ts
+++ b/projects/example-app/src/app/books/containers/view-book-page.component.ts
@@ -3,10 +3,11 @@ import {
   OnDestroy,
   ChangeDetectionStrategy,
   inject,
+  input,
+  effect,
+  untracked,
 } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { map } from 'rxjs/operators';
 
 import { ViewBookPageActions } from '@example-app/books/actions/view-book-page.actions';
 import { SelectedBookPageComponent } from './selected-book-page.component';
@@ -28,16 +29,16 @@ import { SelectedBookPageComponent } from './selected-book-page.component';
   imports: [SelectedBookPageComponent],
   template: ` <bc-selected-book-page></bc-selected-book-page> `,
 })
-export class ViewBookPageComponent implements OnDestroy {
+export class ViewBookPageComponent {
   private readonly store = inject(Store);
 
-  private readonly actionsSubscription = inject(ActivatedRoute)
-    .params.pipe(
-      map((params) => ViewBookPageActions.selectBook({ id: params.id }))
-    )
-    .subscribe((action) => this.store.dispatch(action));
+  readonly id = input.required<string>();
 
-  ngOnDestroy() {
-    this.actionsSubscription.unsubscribe();
-  }
+  readonly selectBookEffect = effect(() => {
+    const id = this.id();
+
+    untracked(() => {
+      this.store.dispatch(ViewBookPageActions.selectBook({ id }));
+    });
+  });
 }

From 6312a4cbf2e4dd88dfab0dce317d4b2888d57a97 Mon Sep 17 00:00:00 2001
From: Rainer Hahnekamp <rainer.hahnekamp@gmail.com>
Date: Sun, 29 Sep 2024 22:42:19 +0200
Subject: [PATCH 10/10] feat: revert standalone-app changes

---
 projects/standalone-app/src/app/app.component.spec.ts | 11 +++--------
 projects/standalone-app/src/app/app.effects.ts        |  6 +++---
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/projects/standalone-app/src/app/app.component.spec.ts b/projects/standalone-app/src/app/app.component.spec.ts
index ced3e561c8..e636a11368 100644
--- a/projects/standalone-app/src/app/app.component.spec.ts
+++ b/projects/standalone-app/src/app/app.component.spec.ts
@@ -1,18 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import { RouterTestingModule } from '@angular/router/testing';
 import { provideMockStore } from '@ngrx/store/testing';
-import { provideRouter } from '@angular/router';
-import { provideLocationMocks } from '@angular/common/testing';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
-      providers: [
-        provideMockStore(),
-        provideRouter([]),
-        provideLocationMocks(),
-      ],
+      imports: [RouterTestingModule, AppComponent],
+      providers: [provideMockStore()],
     }).compileComponents();
   });
 
diff --git a/projects/standalone-app/src/app/app.effects.ts b/projects/standalone-app/src/app/app.effects.ts
index eba323c582..db83e2bcbe 100644
--- a/projects/standalone-app/src/app/app.effects.ts
+++ b/projects/standalone-app/src/app/app.effects.ts
@@ -1,15 +1,15 @@
-import { inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Actions, createEffect } from '@ngrx/effects';
 import { tap } from 'rxjs';
 
 @Injectable()
 export class AppEffects {
-  private actions$ = inject(Actions);
-
   logger$ = createEffect(
     () => {
       return this.actions$.pipe(tap((action) => console.log(action)));
     },
     { dispatch: false }
   );
+
+  constructor(private actions$: Actions) {}
 }