Docs: Add standalone example in walkthrough

[Davidihl]

Information

While reading through the walkthrough, I noticed that it only provides an implementation with app.modules.ts

Since the solution is documentated here, my suggestion would be to add a code snippet in the walkthrough as well, introducing modern Angular synthax.

Suggestion

My suggestion uses the code I generated following the official walkthrough in a fresh Angular 19 repository.

Step 5

In case you are using standalone components (set to default in Angular 19), import the standalone NgRx API provideStore and the books.reducer and collection.reducer file.

// ... src/app/app.config.ts
import { provideHttpClient, withFetch } from '@angular/common/http';
import { booksReducer } from './state/books.reducer';
import { collectionReducer } from './state/collection.reducer';
import { provideStore } from '@ngrx/store';

Step 6

Using the standalone standalone API, add the provideStore function with an argument containing an object with 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 provides the gobal store providers.

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideStore({ books: booksReducer, collection: collectionReducer }),
    provideHttpClient(withFetch()),
  ],
};

Step 9

// ... src/app/book-list/book-list.component.html
@for(book of books; track book){
  <div class="book-item">
    <p>{{ book.volumeInfo.title }}</p>
    <span> by {{ book.volumeInfo.authors }}</span>
    <button (click)="add.emit(book.id)" data-test="add-button">
      Add to Collection
    </button>
  </div>
}

Step 10

// ... src/app/book-collection/book-collection.component.html
@for(book of books; track book){
<div>
  <p>{{ book.volumeInfo.title }}</p>
  <span> by {{ book.volumeInfo.authors }}</span>
  <button (click)="remove.emit(book.id)" data-test="remove-button">
    Remove from Collection
  </button>
</div>
}

Step 11

For standalone components, there are no declarations to be added inside app.modules.ts.

Step 12

For standalone components, add the missing imports inside the app.component.ts instead.

// ... src/app/app.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { BookCollectionComponent } from './book-collection/book-collection.component';
import { BookListComponent } from './book-list/book-list.component';
import { GoogleBooksService } from './book-list/books.service';
import { BooksActions, BooksApiActions } from './state/books.actions';
import { selectBookCollection, selectBooks } from './state/books.selectors';

@Component({
  selector: 'app-root',
  imports: [CommonModule, BookListComponent, BookCollectionComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  books$ = this.store.select(selectBooks);
  bookCollection$ = this.store.select(selectBookCollection);

  onAdd(bookId: string) {
    this.store.dispatch(BooksActions.addBook({ bookId }));
  }

  onRemove(bookId: string) {
    this.store.dispatch(BooksActions.removeBook({ bookId }));
  }

  constructor(private booksService: GoogleBooksService, private store: Store) {}

  ngOnInit() {
    this.booksService
      .getBooks()
      .subscribe((books) =>
        this.store.dispatch(BooksApiActions.retrievedBookList({ books }))
      );
  }
}

Documentation page

https://ngrx.io/guide/store/walkthrough

I would be willing to submit a PR to fix this issue

• Yes
• No

[markostanimirovic]

Hi @Davidihl,

The issue for updating @ngrx/store documentation (incl. "Walkthrough") to standalone examples is already opened and accepts PRs: #4067