Book List — Facts

Overview

Standalone component BookListComponent (route /books, the app’s default). Renders the whole catalog as a card grid with a live search box + genre <select>, plus a per-card Add to cart.

Component tree

BookListComponent → per-book <article.card> with a routerLink to /books/:id. No child components (flat template). Uses CurrencyPipe + RouterLink.

Data flow

BookService.getAll() / .genres() are read synchronously (in-memory data, no HTTP, no async).
search + genre are signals; filtered is a computed() that filters getAll() by both.
Add to cart calls CartService.add(book) (shared root singleton) — same service the detail + cart pages use.

Routes & params

/books — no params. Default route ('' → books).

Key files

Role	File
Component	`app/src/app/pages/book-list/book-list.component.ts`
Template	`…/book-list.component.html`
Styles	`…/book-list.component.scss`
Data	`app/src/app/services/book.service.ts`
Model	`app/src/app/models/book.ts`

Gotchas

Filtering is client-side over the full in-memory list — fine for the demo, would need server paging for a real catalog.
filtered recomputes on every search/genre change (signals) — no manual subscriptions to leak.
Add to cart mutates shared CartService state; the header/cart count updates reactively everywhere.

[[book-detail]] (card links to it) · [[cart-checkout]] (shares CartService).