Project 4 — Ecommerce

1. Learning Objectives

In this project guide, you will build a multi-page Ecommerce catalog and checkout store. By the end of this project, you will be able to:

• Configure multi-page layouts using modern Angular Router configurations.
• Pass and extract route variables dynamically using routing parameters (:id).
• Implement a central, reactive shopping cart store using Angular Signals.
• Derive total prices, item counts, and shipping tax fees reactively using computed().
• Coordinate cross-view updates as items are added or removed.

2. What We Are Building & Design System

We are building a responsive online store. The application features:

• Product Catalog Page: Renders a catalog of products (computers, keyboards, monitors) with pricing and description cards. Clicking a card links to detailed product layouts.
• Product Detail Page: Dynamic details view reading parameters from the URL route to fetch specific descriptions.
• Cart Drawer Widget: Exposes a cart count badge. Updates instantly across both page states.
• Checkout Page: Sums item counts, applies shipping and tax rates, and displays total prices.

3. Step-by-Step Implementation Guide

Step 1: Configure Multi-Page Routes

Register dynamic routing structures inside your app:

Step 2: Initialize Cart State Service

Create a singleton service storing items and quantities inside a writable signal, using computed signals to track invoice pricing:

Step 3: Bind Router Parameters

Extract dynamic route keys inside your component class:

4. Full Working Code

Save these code structures to build the Ecommerce store:

5. Reviewing the Build / Self-Correction Checks

Verify your state management and router integrations operate correctly:

• Check navigation link clicks: Click catalog details links or "Back to Catalog" anchors and verify the URL paths resolve correctly.
• Verify quantity consolidation: Click "Add to Cart" on the same product multiple times. Verify the cart list updates the item count (quantity) instead of appending duplicate product card rows.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this Ecommerce app, you have integrated routing parameters, navigation transitions, and global reactive state signals.

• Next, proceed to **Chapter 9 — Machine Coding** to build responsive components under interview constraints.

---