Tasks: Add Recently Viewed Products Strip
Implementation checklist
- [ ] Task 1 — Create
RecentlyViewedServicewithadd(),remove(),getAll()methods and aBehaviorSubjectfor live updates; include localStorage read/write with error handling. - [ ] Task 2 — Create
RecentlyViewedComponent(ts + html + scss): subscribes to service observable; renders thumbnail, name, "×" button per item; hidden when list empty. - [ ] Task 3 — Wire routing: each item's click navigates to
/products/:idvia[routerLink]. - [ ] Task 4 — Wire remove: "×" click calls
service.remove(item.id); strip updates reactively. - [ ] Task 5 — Declare
RecentlyViewedComponentinProductsModule. - [ ] Task 6 — Add
<app-recently-viewed>toproduct-catalog-page.component.htmlbelow the product grid. - [ ] Task 7 — In
ProductDetailPageComponent.ngOnInit, injectRecentlyViewedServiceand callservice.add()with the current product's id, name, and imageUrl.
Definition of done
All 7 tasks checked. ng build exits 0. Strip visible in browser after visiting at least one product detail page. "×" removes items. Cap of 10 enforced.
Verification
Manual smoke test: visit a product detail page, return to catalog, confirm strip shows the item; visit 11 products total, confirm only the 10 most recent appear.