Cart & Checkout — Facts

Overview

Standalone CartComponent (route /cart). Three template states: order placed, empty cart, and the line-item table (@if placed / @else if empty / @else table).

Component tree

Single component, no children. Uses RouterLink + CurrencyPipe. A local placed signal flips the view after checkout.

Data flow

Reads CartService.items() / .total() (signals/computed) — no local copy of cart state.
Quantity <input> change → CartService.setQuantity(id, n); n = 0 removes the line (service filters quantity > 0).
Remove → CartService.remove(id). Checkout → placed.set(true) then CartService.clear().

Routes & params

/cart — no params.

Key files

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

Gotchas

Setting quantity to 0 deletes the line — the removal rule lives in CartService.setQuantity, not the component.
Checkout is a stub: it clears the cart and shows a message; there’s no order persistence or backend.
total() is a computed() over items(); it updates automatically — don’t recompute in the component.

[[book-detail]] + [[book-list]] (both write to the same CartService).