+ }
+ `,
+})
+export class BookCollection {
+ @Input()
+ books: ReadonlyArray = [];
+ @Output()
+ remove = new EventEmitter();
+}
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app/book-list/book-list.component.css b/projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.css
similarity index 100%
rename from projects/www/src/app/examples/store-walkthrough/src/app/book-list/book-list.component.css
rename to projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.css
diff --git a/projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.ts b/projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.ts
new file mode 100644
index 0000000000..50b490fc97
--- /dev/null
+++ b/projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.ts
@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Book } from './books.model';
+
+@Component({
+ selector: 'app-book-list',
+ template: `
+ @for(book of books; track book) {
+
+
{{ book.volumeInfo.title }}
+ by {{ book.volumeInfo.authors }}
+
+
+ }
+ `,
+})
+export class BookList {
+ @Input()
+ books: ReadonlyArray = [];
+ @Output()
+ add = new EventEmitter();
+}
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app/book-list/books.model.ts b/projects/www/src/app/examples/store-walkthrough/src/book-list/books.model.ts
similarity index 100%
rename from projects/www/src/app/examples/store-walkthrough/src/app/book-list/books.model.ts
rename to projects/www/src/app/examples/store-walkthrough/src/book-list/books.model.ts
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app/book-list/books.service.ts b/projects/www/src/app/examples/store-walkthrough/src/book-list/books.ts
similarity index 67%
rename from projects/www/src/app/examples/store-walkthrough/src/app/book-list/books.service.ts
rename to projects/www/src/app/examples/store-walkthrough/src/book-list/books.ts
index 266cc3ab37..c584b5571c 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/app/book-list/books.service.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/book-list/books.ts
@@ -1,13 +1,12 @@
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';
+import { Observable, map } from 'rxjs';
import { Book } from './books.model';
@Injectable({ providedIn: 'root' })
-export class GoogleBooksService {
- constructor(private http: HttpClient) {}
+export class GoogleBooks {
+ private readonly http = inject(HttpClient);
getBooks(): Observable> {
return this.http
diff --git a/projects/www/src/app/examples/store-walkthrough/src/index.html b/projects/www/src/app/examples/store-walkthrough/src/index.html
deleted file mode 100644
index 371e0a2fb9..0000000000
--- a/projects/www/src/app/examples/store-walkthrough/src/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
- NgRx Tutorial
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/projects/www/src/app/examples/store-walkthrough/src/main.ts b/projects/www/src/app/examples/store-walkthrough/src/main.ts
index 2e578fde01..792adf201c 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/main.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/main.ts
@@ -1,19 +1,15 @@
-import './polyfills';
-
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic()
- .bootstrapModule(AppModule)
- .then((ref) => {
- // Ensure Angular destroys itself on hot reloads.
- if (window['ngRef']) {
- window['ngRef'].destroy();
- }
- window['ngRef'] = ref;
-
- // Otherwise, log the boot error
- })
- .catch((err) => console.error(err));
+import '@angular/compiler';
+import { bootstrapApplication } from '@angular/platform-browser';
+import {
+ mergeApplicationConfig,
+ provideZonelessChangeDetection,
+} from '@angular/core';
+import { App } from './app';
+import { appConfig } from './app.config';
+import { provideHttpClient } from '@angular/common/http';
+
+const config = mergeApplicationConfig(appConfig, {
+ providers: [provideZonelessChangeDetection(), provideHttpClient()],
+});
+
+bootstrapApplication(App, config);
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app/state/app.state.ts b/projects/www/src/app/examples/store-walkthrough/src/state/app.state.ts
similarity index 100%
rename from projects/www/src/app/examples/store-walkthrough/src/app/state/app.state.ts
rename to projects/www/src/app/examples/store-walkthrough/src/state/app.state.ts
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app/state/books.actions.ts b/projects/www/src/app/examples/store-walkthrough/src/state/books.actions.ts
similarity index 100%
rename from projects/www/src/app/examples/store-walkthrough/src/app/state/books.actions.ts
rename to projects/www/src/app/examples/store-walkthrough/src/state/books.actions.ts
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app/state/books.reducer.ts b/projects/www/src/app/examples/store-walkthrough/src/state/books.reducer.ts
similarity index 100%
rename from projects/www/src/app/examples/store-walkthrough/src/app/state/books.reducer.ts
rename to projects/www/src/app/examples/store-walkthrough/src/state/books.reducer.ts
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app/state/books.selectors.ts b/projects/www/src/app/examples/store-walkthrough/src/state/books.selectors.ts
similarity index 100%
rename from projects/www/src/app/examples/store-walkthrough/src/app/state/books.selectors.ts
rename to projects/www/src/app/examples/store-walkthrough/src/state/books.selectors.ts
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app/state/collection.reducer.ts b/projects/www/src/app/examples/store-walkthrough/src/state/collection.reducer.ts
similarity index 100%
rename from projects/www/src/app/examples/store-walkthrough/src/app/state/collection.reducer.ts
rename to projects/www/src/app/examples/store-walkthrough/src/state/collection.reducer.ts
diff --git a/projects/www/src/app/examples/store-walkthrough/stackblitz.yml b/projects/www/src/app/examples/store-walkthrough/stackblitz.yml
new file mode 100644
index 0000000000..d8f75139ef
--- /dev/null
+++ b/projects/www/src/app/examples/store-walkthrough/stackblitz.yml
@@ -0,0 +1,20 @@
+name: 'Starter project with NgRx dependencies'
+description: 'A simple Angular project with NgRx dependencies'
+extends: '../__base/stackblitz-empty.yml'
+open: src/app.ts
+files:
+ src/main.ts: './src/main.ts'
+ src/app.ts: './src/app.ts'
+ src/app.config.ts: './src/app.config.ts'
+ src/state/app.state.ts: './src/state/app.state.ts'
+ src/state/books.actions.ts: './src/state/books.actions.ts'
+ src/state/books.reducer.ts: './src/state/books.reducer.ts'
+ src/state/books.selectors.ts: './src/state/books.selectors.ts'
+ src/state/collection.reducer.ts: './src/state/collection.reducer.ts'
+ src/book-list/book-list.ts: './src/book-list/book-list.ts'
+ src/book-list/book-list.css: './src/book-list/book-list.css'
+ src/book-list/books.ts: './src/book-list/books.ts'
+ src/book-list/books.model.ts: './src/book-list/books.model.ts'
+ src/book-collection/book-collection.ts: './src/book-collection/book-collection.ts'
+ src/book-collection/book-collection.css: './src/book-collection/book-collection.css'
+ index.html: './index.html'
diff --git a/projects/www/src/app/pages/guide/store/walkthrough.md b/projects/www/src/app/pages/guide/store/walkthrough.md
index 8b027695f4..23bf7f4201 100644
--- a/projects/www/src/app/pages/guide/store/walkthrough.md
+++ b/projects/www/src/app/pages/guide/store/walkthrough.md
@@ -1,91 +1,71 @@
# Walkthrough
-The following example more extensively utilizes the key concepts of store to manage the state of book list, and how the user can add a book to and remove it from their collection within an Angular component. Try the .
+The following example more extensively utilizes the key concepts of store to manage the state of book list, and how the user can add a book to and remove it from their collection within an Angular component. To build the example, follow the steps in the tutorial below.
-## Tutorial
-
-1. Generate a new project using StackBlitz and create a folder named `book-list` inside the `app` folder. This folder is used to hold the book list component later in the tutorial. For now, let's start with adding a file named `books.model.ts` to reference different aspects of a book in the book list.
-
-
-
-
-
-2. Right click on the `app` folder to create a state management folder `state`. Within the new folder, create a new file `books.actions.ts` to describe the book actions. Book actions include the book list retrieval, and the add and remove book actions.
+The full example is available on StackBlitz:
-
-
-
-
-3. Right click on the `state` folder and create a new file labeled `books.reducer.ts`. Within this file, define a reducer function to handle the retrieval of the book list from the state and consequently, update the state.
-
-
-
-
+
-4. Create another file named `collection.reducer.ts` in the `state` folder to handle actions that alter the user's book collection. Define a reducer function that handles the add action by appending the book's ID to the collection, including a condition to avoid duplicate book IDs. Define the same reducer to handle the remove action by filtering the collection array with the book ID.
+## Tutorial
-
+1. Generate a new project using the and create a folder named `book-list` inside the `src` folder. This folder is used to hold the book list component later in the tutorial. For now, let's start with adding a file named `books.model.ts` to reference different aspects of a book in the book list.
+
-5. Import the `StoreModule` from `@ngrx/store` and the `books.reducer` and `collection.reducer` file.
-
-
+2. Right click on the `app` folder to create a state management folder `state`. Within the new folder, create a new file `books.actions.ts` to describe the book actions. Book actions include the book list retrieval, and the add and remove book actions.
+
-6. Add the `StoreModule.forRoot` function in the `imports` array of your `AppModule` with an object containing the `books` and `booksReducer`, as well as the `collection` and `collectionReducer` that manage the state of the book list and the collection. The `StoreModule.forRoot()` method registers the global providers needed to access the `Store` throughout your application.
-
-
+3. Right click on the `state` folder and create a new file labeled `books.reducer.ts`. Within this file, define a reducer function to handle the retrieval of the book list from the state and consequently, update the state.
+
-7. Create the book list and collection selectors to ensure we get the correct information from the store. As you can see, the `selectBookCollection` selector combines two other selectors in order to build its return value.
-
-
+4. Create another file named `collection.reducer.ts` in the `state` folder to handle actions that alter the user's book collection. Define a reducer function that handles the add action by appending the book's ID to the collection, including a condition to avoid duplicate book IDs. Define the same reducer to handle the remove action by filtering the collection array with the book ID.
+
-8. In the `book-list` folder, we want to have a service that fetches the data needed for the book list from an API. Create a file in the `book-list` folder named `books.service.ts`, which will call the Google Books API and return a list of books.
-
-
+5. Add the `provideStore` function in the `providers` array of your `app.config.ts` with an object containing the `books` and `booksReducer`, as well as the `collection` and `collectionReducer` that manage the state of the book list and the collection. The `provideStore` function registers the global providers needed to access the `Store` throughout your application.
+
-9. In the same folder (`book-list`), create the `BookListComponent` with the following template. Update the `BookListComponent` class to dispatch the `add` event.
-
-
+6. Create the book list and collection selectors to ensure we get the correct information from the store. As you can see, the `selectBookCollection` selector combines two other selectors in order to build its return value.
+
-
+7. In the `book-list` folder, we want to have a service that fetches the data needed for the book list from an API. Create a file in the `book-list` folder named `books.service.ts`, which will call the Google Books API and return a list of books.
+
-10. Create a new _Component_ named `book-collection` in the `app` folder. Update the `BookCollectionComponent` template and class.
-
-
+8. Add the `HttpClient` module using the `provideHttpClient` provider in the `main.ts` file in order to make HTTP requests.
+
-
+9. In the same folder (`book-list`), create the `BookList` with the following template. Update the `BookList` class to dispatch the `add` event.
+
-11. Add `BookListComponent` and `BookCollectionComponent` to your `AppComponent` template, and to your declarations (along with their top level import statements) in `app.module.ts` as well.
-
-
+10. Create a new _Component_ named `book-collection` in the `app` folder. Update the `BookCollection` template and class.
+
-
+11. Add `BookList` and `BookCollection` to your `App` template, and to your imports in `app.ts` as well.
+
-12. In the `AppComponent` class, add the selectors and corresponding actions to dispatch on `add` or `remove` method calls. Then subscribe to the Google Books API in order to update the state. (This should probably be handled by NgRx Effects, which you can read about [here](guide/effects). For the sake of this demo, NgRx Effects is not being included).
-
-
+12. In the `App` class, add the selectors and corresponding actions to dispatch on `add` or `remove` method calls. Then subscribe to the Google Books API in order to update the state. (This should probably be handled by NgRx Effects, which you can read about [here](guide/effects). For the sake of this demo, NgRx Effects is not being included).
+
And that's it! Click the add and remove buttons to change the state.
From 2fa62b740343f5de215a3fca50a7111462d5f3a1 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Fri, 19 Sep 2025 18:43:31 +0200
Subject: [PATCH 2/3] chore: run prettier on www directory
---
projects/www/index.html | 3 +-
projects/www/public/site.webmanifest | 34 +++---
.../www/src/app/examples/__base/index.html | 2 +-
.../src/app/paginator.html | 112 +++++++++++-------
.../src/app/paginator.scss | 3 +-
.../src/index.html | 20 ++--
.../src/styles.scss | 3 +-
.../src/app/paginator.html | 112 +++++++++++-------
.../src/app/paginator.scss | 3 +-
.../component-store-paginator/src/index.html | 20 ++--
.../component-store-paginator/src/styles.scss | 3 +-
.../src/app/app.component.css | 2 +-
.../src/index.html | 20 ++--
.../src/app/examples/ngrx-start/index.html | 2 +-
.../src/app/app.component.css | 2 +-
.../src/app/app.component.html | 8 +-
.../router-store-selectors/src/index.html | 3 +-
.../app/examples/store-walkthrough/index.html | 2 +-
.../src/book-collection/book-collection.ts | 18 ++-
.../src/book-list/book-list.css | 2 +-
.../src/book-list/book-list.ts | 18 ++-
.../testing-store/src/app/app.component.html | 5 +-
.../book-collection.component.css | 2 +-
.../book-collection.component.html | 15 +--
.../src/app/book-list/book-list.component.css | 2 +-
.../app/book-list/book-list.component.html | 17 ++-
.../app/examples/testing-store/src/index.html | 2 +-
.../pages/guide/data/architecture-overview.md | 1 -
.../app/pages/guide/data/entity-metadata.md | 4 +-
.../app/pages/guide/signals/signal-state.md | 12 +-
.../guide/signals/signal-store/events.md | 4 +-
.../signals/signal-store/linked-state.md | 28 ++---
.../guide/signals/signal-store/testing.md | 2 +-
.../store/configuration/runtime-checks.md | 4 +-
.../src/app/pages/guide/store/selectors.md | 13 +-
projects/www/src/styles.scss | 14 ++-
36 files changed, 272 insertions(+), 245 deletions(-)
diff --git a/projects/www/index.html b/projects/www/index.html
index 1dc9ca3ee9..ef35e8bb58 100644
--- a/projects/www/index.html
+++ b/projects/www/index.html
@@ -1,4 +1,4 @@
-
+
@@ -31,7 +31,6 @@
href="https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
-
diff --git a/projects/www/public/site.webmanifest b/projects/www/public/site.webmanifest
index aa8f14478a..aa98c188e7 100644
--- a/projects/www/public/site.webmanifest
+++ b/projects/www/public/site.webmanifest
@@ -1,19 +1,19 @@
{
- "name": "NgRx",
- "short_name": "NgRx",
- "icons": [
- {
- "src": "/android-chrome-192x192.png",
- "sizes": "192x192",
- "type": "image/png"
- },
- {
- "src": "/android-chrome-512x512.png",
- "sizes": "512x512",
- "type": "image/png"
- }
- ],
- "theme_color": "#000000",
- "background_color": "#000000",
- "display": "standalone"
+ "name": "NgRx",
+ "short_name": "NgRx",
+ "icons": [
+ {
+ "src": "/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#000000",
+ "background_color": "#000000",
+ "display": "standalone"
}
diff --git a/projects/www/src/app/examples/__base/index.html b/projects/www/src/app/examples/__base/index.html
index 668d931247..2e15ba0163 100644
--- a/projects/www/src/app/examples/__base/index.html
+++ b/projects/www/src/app/examples/__base/index.html
@@ -1,4 +1,4 @@
-
+
diff --git a/projects/www/src/app/examples/component-store-paginator-service/src/app/paginator.html b/projects/www/src/app/examples/component-store-paginator-service/src/app/paginator.html
index 504b40e936..ebba748544 100644
--- a/projects/www/src/app/examples/component-store-paginator-service/src/app/paginator.html
+++ b/projects/www/src/app/examples/component-store-paginator-service/src/app/paginator.html
@@ -1,17 +1,20 @@
-
diff --git a/projects/www/src/app/examples/testing-store/src/app/book-collection/book-collection.component.css b/projects/www/src/app/examples/testing-store/src/app/book-collection/book-collection.component.css
index 24469d9a62..fe3e6691ae 100644
--- a/projects/www/src/app/examples/testing-store/src/app/book-collection/book-collection.component.css
+++ b/projects/www/src/app/examples/testing-store/src/app/book-collection/book-collection.component.css
@@ -8,4 +8,4 @@ p {
display: inline-block;
font-style: italic;
margin: 0 0 5px;
-}
\ No newline at end of file
+}
diff --git a/projects/www/src/app/examples/testing-store/src/app/book-collection/book-collection.component.html b/projects/www/src/app/examples/testing-store/src/app/book-collection/book-collection.component.html
index 2a65f9ecc0..af8fa2595a 100644
--- a/projects/www/src/app/examples/testing-store/src/app/book-collection/book-collection.component.html
+++ b/projects/www/src/app/examples/testing-store/src/app/book-collection/book-collection.component.html
@@ -1,10 +1,7 @@
-
-
{{book.volumeInfo.title}}
by {{book.volumeInfo.authors}}
-
+
+
{{ book.volumeInfo.title }}
+ by {{ book.volumeInfo.authors }}
+
diff --git a/projects/www/src/app/examples/testing-store/src/app/book-list/book-list.component.css b/projects/www/src/app/examples/testing-store/src/app/book-list/book-list.component.css
index 374d31d7be..8b38025829 100644
--- a/projects/www/src/app/examples/testing-store/src/app/book-list/book-list.component.css
+++ b/projects/www/src/app/examples/testing-store/src/app/book-list/book-list.component.css
@@ -8,4 +8,4 @@ p {
display: inline-block;
font-style: italic;
margin: 0;
-}
\ No newline at end of file
+}
diff --git a/projects/www/src/app/examples/testing-store/src/app/book-list/book-list.component.html b/projects/www/src/app/examples/testing-store/src/app/book-list/book-list.component.html
index b3fb0e12b0..8ef9f7780b 100644
--- a/projects/www/src/app/examples/testing-store/src/app/book-list/book-list.component.html
+++ b/projects/www/src/app/examples/testing-store/src/app/book-list/book-list.component.html
@@ -1,10 +1,7 @@
-
-
{{book.volumeInfo.title}}
by {{book.volumeInfo.authors}}
-
-
\ No newline at end of file
+
+
{{ book.volumeInfo.title }}
+ by {{ book.volumeInfo.authors }}
+
+
diff --git a/projects/www/src/app/examples/testing-store/src/index.html b/projects/www/src/app/examples/testing-store/src/index.html
index f902fba22d..f8da00869e 100644
--- a/projects/www/src/app/examples/testing-store/src/index.html
+++ b/projects/www/src/app/examples/testing-store/src/index.html
@@ -1,4 +1,4 @@
-
+
diff --git a/projects/www/src/app/pages/guide/data/architecture-overview.md b/projects/www/src/app/pages/guide/data/architecture-overview.md
index 954572e6f3..af571b7f4a 100644
--- a/projects/www/src/app/pages/guide/data/architecture-overview.md
+++ b/projects/www/src/app/pages/guide/data/architecture-overview.md
@@ -24,7 +24,6 @@ such as `QUERY_ALL` for the `Hero` entity type.
1. The view/component calls [`EntityCollectionService.getAll()`](guide/data/entity-services), which dispatches the hero's `QUERY_ALL` [EntityAction](guide/data/entity-actions) to the store.
2. NgRx kicks into gear ...
-
1. The NgRx Data [EntityReducer](guide/data/entity-reducer) reads the action's `entityName` property (`Hero` in this example) and
forwards the action and existing entity collection state to the `EntityCollectionReducer` for heroes.
diff --git a/projects/www/src/app/pages/guide/data/entity-metadata.md b/projects/www/src/app/pages/guide/data/entity-metadata.md
index 73f8fdb118..119ce5f9b4 100644
--- a/projects/www/src/app/pages/guide/data/entity-metadata.md
+++ b/projects/www/src/app/pages/guide/data/entity-metadata.md
@@ -155,7 +155,7 @@ export function nameAndSayingFilter(
entities: Villain[],
pattern: string
) {
- return PropsFilterFnFactory[('name', 'saying')](
+ return (PropsFilterFnFactory)[('name', 'saying')](
entities,
pattern
);
@@ -276,7 +276,7 @@ Following the prior step, we have added the additional property to the `action.p
```typescript
export class AdditionalEntityCollectionReducerMethods<
- T
+ T,
> extends EntityCollectionReducerMethods {
constructor(
public entityName: string,
diff --git a/projects/www/src/app/pages/guide/signals/signal-state.md b/projects/www/src/app/pages/guide/signals/signal-state.md
index 2b276de532..5bd49cb35e 100644
--- a/projects/www/src/app/pages/guide/signals/signal-state.md
+++ b/projects/www/src/app/pages/guide/signals/signal-state.md
@@ -227,13 +227,13 @@ import { BookListStore } from './book-list-store';
@for (movie of store.movies(); track movie.id) {
-
{{ movie.id }}: {{ movie.name }}
+
{{ movie.id }}: {{ movie.name }}
}
`,
diff --git a/projects/www/src/app/pages/guide/store/configuration/runtime-checks.md b/projects/www/src/app/pages/guide/store/configuration/runtime-checks.md
index a20a4f09c9..afb4fe4c21 100644
--- a/projects/www/src/app/pages/guide/store/configuration/runtime-checks.md
+++ b/projects/www/src/app/pages/guide/store/configuration/runtime-checks.md
@@ -58,9 +58,9 @@ export const reducer = createReducer(
initialState,
on(addTodo, (state, { todo }) => {
// Violation 1: we assign a new value to `todoInput` directly
- (state.todoInput = ''),
+ ((state.todoInput = ''),
// Violation 2: `push` modifies the array
- state.todos.push(todo);
+ state.todos.push(todo));
})
);
```
diff --git a/projects/www/src/app/pages/guide/store/selectors.md b/projects/www/src/app/pages/guide/store/selectors.md
index c4168242f0..6abfbda9a1 100644
--- a/projects/www/src/app/pages/guide/store/selectors.md
+++ b/projects/www/src/app/pages/guide/store/selectors.md
@@ -493,11 +493,14 @@ export const selectLastStateTransitions = (count: number) => {
return pipe(
// Thanks to `createSelector` the operator will have memoization "for free"
select(selectProjectedValues), // Combines the last `count` state values in array
- scan((acc, curr) => {
- return [curr, ...acc].filter(
- (val, index) => index < count && val !== undefined
- );
- }, [] as { foo: number; bar: string }[]) // XX: Explicit type hint for the array.
+ scan(
+ (acc, curr) => {
+ return [curr, ...acc].filter(
+ (val, index) => index < count && val !== undefined
+ );
+ },
+ [] as { foo: number; bar: string }[]
+ ) // XX: Explicit type hint for the array.
// Equivalent to what is emitted by the selector
);
};
diff --git a/projects/www/src/styles.scss b/projects/www/src/styles.scss
index db514f005f..667f854e37 100644
--- a/projects/www/src/styles.scss
+++ b/projects/www/src/styles.scss
@@ -10,11 +10,13 @@ html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
- @include mat.theme((
- color: mat.$violet-palette,
- typography: Roboto,
- density: 0
- ));
+ @include mat.theme(
+ (
+ color: mat.$violet-palette,
+ typography: Roboto,
+ density: 0,
+ )
+ );
}
*,
@@ -112,7 +114,7 @@ code {
a {
text-decoration: none;
color: #fface6;
- cursor: pointer
+ cursor: pointer;
}
// Set up Angular Material
From df8a9e96ae93379c1d0e11f2bbb22fc484c84504 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Fri, 19 Sep 2025 18:50:12 +0200
Subject: [PATCH 3/3] docs: update examples
---
.../src/app/examples/ngrx-start/src/app.config.ts | 7 +++++--
projects/www/src/app/examples/ngrx-start/src/main.ts | 10 +---------
.../app/examples/store-walkthrough/src/app.config.ts | 8 +++++++-
.../src/app/examples/store-walkthrough/src/app.ts | 4 ++--
.../src/book-collection/book-collection.ts | 2 +-
.../store-walkthrough/src/book-list/book-list.ts | 2 +-
.../src/book-list/{books.model.ts => book.ts} | 0
.../src/book-list/{books.ts => books-service.ts} | 4 ++--
.../src/app/examples/store-walkthrough/src/main.ts | 11 +----------
.../store-walkthrough/src/state/app.state.ts | 2 +-
.../store-walkthrough/src/state/books.actions.ts | 2 +-
.../store-walkthrough/src/state/books.reducer.ts | 2 +-
.../store-walkthrough/src/state/books.selectors.ts | 2 +-
.../app/examples/store-walkthrough/stackblitz.yml | 4 ++--
.../www/src/app/pages/guide/store/walkthrough.md | 12 ++++++------
15 files changed, 32 insertions(+), 40 deletions(-)
rename projects/www/src/app/examples/store-walkthrough/src/book-list/{books.model.ts => book.ts} (100%)
rename projects/www/src/app/examples/store-walkthrough/src/book-list/{books.ts => books-service.ts} (88%)
diff --git a/projects/www/src/app/examples/ngrx-start/src/app.config.ts b/projects/www/src/app/examples/ngrx-start/src/app.config.ts
index 81a6edde41..3b11dcffb8 100644
--- a/projects/www/src/app/examples/ngrx-start/src/app.config.ts
+++ b/projects/www/src/app/examples/ngrx-start/src/app.config.ts
@@ -1,5 +1,8 @@
-import { ApplicationConfig } from '@angular/core';
+import {
+ ApplicationConfig,
+ provideZonelessChangeDetection,
+} from '@angular/core';
export const appConfig: ApplicationConfig = {
- providers: [],
+ providers: [provideZonelessChangeDetection()],
};
diff --git a/projects/www/src/app/examples/ngrx-start/src/main.ts b/projects/www/src/app/examples/ngrx-start/src/main.ts
index df19f9c747..363eedc107 100644
--- a/projects/www/src/app/examples/ngrx-start/src/main.ts
+++ b/projects/www/src/app/examples/ngrx-start/src/main.ts
@@ -1,14 +1,6 @@
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
-import {
- mergeApplicationConfig,
- provideZonelessChangeDetection,
-} from '@angular/core';
import { App } from './app';
import { appConfig } from './app.config';
-const config = mergeApplicationConfig(appConfig, {
- providers: [provideZonelessChangeDetection()],
-});
-
-bootstrapApplication(App, config);
+bootstrapApplication(App, appConfig);
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app.config.ts b/projects/www/src/app/examples/store-walkthrough/src/app.config.ts
index 4809ebc21f..90d04c6036 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/app.config.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/app.config.ts
@@ -1,4 +1,8 @@
-import { ApplicationConfig } from '@angular/core';
+import {
+ ApplicationConfig,
+ provideZonelessChangeDetection,
+} from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
import { provideStore } from '@ngrx/store';
import { booksReducer } from './state/books.reducer';
@@ -6,6 +10,8 @@ import { collectionReducer } from './state/collection.reducer';
export const appConfig: ApplicationConfig = {
providers: [
+ provideZonelessChangeDetection(),
+ provideHttpClient(),
provideStore({
books: booksReducer,
collection: collectionReducer,
diff --git a/projects/www/src/app/examples/store-walkthrough/src/app.ts b/projects/www/src/app/examples/store-walkthrough/src/app.ts
index ae2d8b62a2..eaa4cd10c2 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/app.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/app.ts
@@ -3,7 +3,7 @@ import { Store } from '@ngrx/store';
import { selectBookCollection, selectBooks } from './state/books.selectors';
import { BooksActions, BooksApiActions } from './state/books.actions';
-import { GoogleBooks } from './book-list/books';
+import { GoogleBooksService } from './book-list/books-service';
import { BookList } from './book-list/book-list';
import { BookCollection } from './book-collection/book-collection';
@@ -24,7 +24,7 @@ import { BookCollection } from './book-collection/book-collection';
imports: [BookList, BookCollection],
})
export class App implements OnInit {
- private readonly booksService = inject(GoogleBooks);
+ private readonly booksService = inject(GoogleBooksService);
private readonly store = inject(Store);
protected books = this.store.selectSignal(selectBooks);
diff --git a/projects/www/src/app/examples/store-walkthrough/src/book-collection/book-collection.ts b/projects/www/src/app/examples/store-walkthrough/src/book-collection/book-collection.ts
index 1e7c518ff8..7eaf09f969 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/book-collection/book-collection.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/book-collection/book-collection.ts
@@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Book } from '../book-list/books.model';
+import { Book } from '../book-list/book';
@Component({
selector: 'app-book-collection',
diff --git a/projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.ts b/projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.ts
index 9421bb3282..851552c172 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/book-list/book-list.ts
@@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Book } from './books.model';
+import { Book } from './book';
@Component({
selector: 'app-book-list',
diff --git a/projects/www/src/app/examples/store-walkthrough/src/book-list/books.model.ts b/projects/www/src/app/examples/store-walkthrough/src/book-list/book.ts
similarity index 100%
rename from projects/www/src/app/examples/store-walkthrough/src/book-list/books.model.ts
rename to projects/www/src/app/examples/store-walkthrough/src/book-list/book.ts
diff --git a/projects/www/src/app/examples/store-walkthrough/src/book-list/books.ts b/projects/www/src/app/examples/store-walkthrough/src/book-list/books-service.ts
similarity index 88%
rename from projects/www/src/app/examples/store-walkthrough/src/book-list/books.ts
rename to projects/www/src/app/examples/store-walkthrough/src/book-list/books-service.ts
index c584b5571c..d6b5fb8b16 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/book-list/books.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/book-list/books-service.ts
@@ -2,10 +2,10 @@ import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { Observable, map } from 'rxjs';
-import { Book } from './books.model';
+import { Book } from './book';
@Injectable({ providedIn: 'root' })
-export class GoogleBooks {
+export class GoogleBooksService {
private readonly http = inject(HttpClient);
getBooks(): Observable> {
diff --git a/projects/www/src/app/examples/store-walkthrough/src/main.ts b/projects/www/src/app/examples/store-walkthrough/src/main.ts
index 792adf201c..363eedc107 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/main.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/main.ts
@@ -1,15 +1,6 @@
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
-import {
- mergeApplicationConfig,
- provideZonelessChangeDetection,
-} from '@angular/core';
import { App } from './app';
import { appConfig } from './app.config';
-import { provideHttpClient } from '@angular/common/http';
-const config = mergeApplicationConfig(appConfig, {
- providers: [provideZonelessChangeDetection(), provideHttpClient()],
-});
-
-bootstrapApplication(App, config);
+bootstrapApplication(App, appConfig);
diff --git a/projects/www/src/app/examples/store-walkthrough/src/state/app.state.ts b/projects/www/src/app/examples/store-walkthrough/src/state/app.state.ts
index b33494b040..5179f1682d 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/state/app.state.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/state/app.state.ts
@@ -1,4 +1,4 @@
-import { Book } from '../book-list/books.model';
+import { Book } from '../book-list/book';
export interface AppState {
books: ReadonlyArray;
diff --git a/projects/www/src/app/examples/store-walkthrough/src/state/books.actions.ts b/projects/www/src/app/examples/store-walkthrough/src/state/books.actions.ts
index 3c075ef4f7..b4e63a4195 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/state/books.actions.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/state/books.actions.ts
@@ -1,5 +1,5 @@
import { createActionGroup, props } from '@ngrx/store';
-import { Book } from '../book-list/books.model';
+import { Book } from '../book-list/book';
export const BooksActions = createActionGroup({
source: 'Books',
diff --git a/projects/www/src/app/examples/store-walkthrough/src/state/books.reducer.ts b/projects/www/src/app/examples/store-walkthrough/src/state/books.reducer.ts
index b96101a25a..b961cfa1f4 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/state/books.reducer.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/state/books.reducer.ts
@@ -1,7 +1,7 @@
import { createReducer, on } from '@ngrx/store';
import { BooksApiActions } from './books.actions';
-import { Book } from '../book-list/books.model';
+import { Book } from '../book-list/book';
export const initialState: ReadonlyArray = [];
diff --git a/projects/www/src/app/examples/store-walkthrough/src/state/books.selectors.ts b/projects/www/src/app/examples/store-walkthrough/src/state/books.selectors.ts
index 834850f209..300c30eb63 100644
--- a/projects/www/src/app/examples/store-walkthrough/src/state/books.selectors.ts
+++ b/projects/www/src/app/examples/store-walkthrough/src/state/books.selectors.ts
@@ -1,5 +1,5 @@
import { createSelector, createFeatureSelector } from '@ngrx/store';
-import { Book } from '../book-list/books.model';
+import { Book } from '../book-list/book';
export const selectBooks = createFeatureSelector>('books');
diff --git a/projects/www/src/app/examples/store-walkthrough/stackblitz.yml b/projects/www/src/app/examples/store-walkthrough/stackblitz.yml
index d8f75139ef..7ca3714e3e 100644
--- a/projects/www/src/app/examples/store-walkthrough/stackblitz.yml
+++ b/projects/www/src/app/examples/store-walkthrough/stackblitz.yml
@@ -13,8 +13,8 @@ files:
src/state/collection.reducer.ts: './src/state/collection.reducer.ts'
src/book-list/book-list.ts: './src/book-list/book-list.ts'
src/book-list/book-list.css: './src/book-list/book-list.css'
- src/book-list/books.ts: './src/book-list/books.ts'
- src/book-list/books.model.ts: './src/book-list/books.model.ts'
+ src/book-list/book.ts: './src/book-list/book.ts'
+ src/book-list/books-service.ts: './src/book-list/books-service.ts'
src/book-collection/book-collection.ts: './src/book-collection/book-collection.ts'
src/book-collection/book-collection.css: './src/book-collection/book-collection.css'
index.html: './index.html'
diff --git a/projects/www/src/app/pages/guide/store/walkthrough.md b/projects/www/src/app/pages/guide/store/walkthrough.md
index 23bf7f4201..2918958b13 100644
--- a/projects/www/src/app/pages/guide/store/walkthrough.md
+++ b/projects/www/src/app/pages/guide/store/walkthrough.md
@@ -8,12 +8,12 @@ The full example is available on StackBlitz:
## Tutorial
-1. Generate a new project using the and create a folder named `book-list` inside the `src` folder. This folder is used to hold the book list component later in the tutorial. For now, let's start with adding a file named `books.model.ts` to reference different aspects of a book in the book list.
+1. Generate a new project using the and create a folder named `book-list` inside the `src` folder. This folder is used to hold the book list component later in the tutorial. For now, let's start with adding a file named `book.ts` to reference different aspects of a book in the book list.
-
+
-2. Right click on the `app` folder to create a state management folder `state`. Within the new folder, create a new file `books.actions.ts` to describe the book actions. Book actions include the book list retrieval, and the add and remove book actions.
+1. Right click on the `app` folder to create a state management folder `state`. Within the new folder, create a new file `books.actions.ts` to describe the book actions. Book actions include the book list retrieval, and the add and remove book actions.
@@ -40,12 +40,12 @@ The full example is available on StackBlitz:
7. In the `book-list` folder, we want to have a service that fetches the data needed for the book list from an API. Create a file in the `book-list` folder named `books.service.ts`, which will call the Google Books API and return a list of books.
-
+
-8. Add the `HttpClient` module using the `provideHttpClient` provider in the `main.ts` file in order to make HTTP requests.
+8. Add the `HttpClient` module using the `provideHttpClient` provider in the `app.config.ts` file in order to make HTTP requests using the `HttpClient`.
-
+
9. In the same folder (`book-list`), create the `BookList` with the following template. Update the `BookList` class to dispatch the `add` event.