Book Detail — Facts

Overview

Standalone BookDetailComponent (route /books/:id). Shows one book and an Add to cart button. Renders a “not found” branch when the id doesn’t match.

Component tree

Single component, no children. Uses RouterLink (back link + cart link) + CurrencyPipe. Template is one @if (book(); as b) { … } @else { not-found }.

Data flow

:id arrives as a component input.required<string>() — enabled by withComponentInputBinding() in app.config.ts. Gotcha G below if that provider is removed.
book is a computed() = BookService.getById(id()); returns undefined → the @else not-found branch.
Add to cart → CartService.add(book) (the same shared singleton the list + cart pages use).

Routes & params

/books/:id — id is the Book.id slug (e.g. dune, clean-code). Unknown id → not-found view (no redirect).

Key files

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

Gotchas

Gotcha G — route-param binding: id is read via input.required(), which only works because provideRouter(routes, withComponentInputBinding()) is set. Remove that and id() throws / never binds.
getById returns undefined for a bad id — the template must guard (@if … @else); don’t assume a book.
Shares CartService — adding here updates the cart badge on every page.

[[book-list]] (links here) · [[cart-checkout]] (consumes what Add-to-cart writes).