Skip to content

Tasks: Add Recently Viewed Products Strip

Implementation checklist

  • [ ] Task 1 — Create RecentlyViewedService with add(), remove(), getAll() methods and a BehaviorSubject for 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/:id via [routerLink].
  • [ ] Task 4 — Wire remove: "×" click calls service.remove(item.id); strip updates reactively.
  • [ ] Task 5 — Declare RecentlyViewedComponent in ProductsModule.
  • [ ] Task 6 — Add <app-recently-viewed> to product-catalog-page.component.html below the product grid.
  • [ ] Task 7 — In ProductDetailPageComponent.ngOnInit, inject RecentlyViewedService and call service.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.

Copyright © MSG Systems Romania AI Labs