Shopping Cart

Build a cart with shared state across components using a signal-based store service.

Services & DISignals@Input/@Output

Overview

A shopping cart is the standard project for learning shared state because it has a real, unavoidable problem: a ProductListComponent needs to add items to the cart, and a completely separate CartSummaryComponent needs to display and update those same items — with neither one a parent of the other. Passing the cart down through @Input() from a common ancestor would mean threading it through a component that doesn't actually use it itself.

Instead, this project manages the cart with a CartService — an @Injectable({ providedIn: 'root' }) class holding its state as signals. Angular's dependency injection system guarantees that any component anywhere in the tree that injects CartService gets back the exact same shared instance, no prop drilling required. This is Angular's answer to the same problem Vue solves with a Pinia store or React solves with Context: one owner of the state, reachable by name from anywhere.

What You'll Build

A CartService (providedIn: 'root') holding a private items signal, with addItem/removeItem/updateQuantity methods.
itemCount and subtotal as computed() signals on the service, always derived from items, never duplicated.
A ProductListComponent that calls cart.addItem(product) directly, with zero cart-related @Input()s passed in.
A CartItemComponent demonstrating classic inputs-in / events-out — it receives one cart line through @Input() and emits quantity/removal changes through @Output().
A CartSummaryComponent that injects the same CartService and renders every line as a CartItemComponent.
Two sibling components sharing one source of truth with zero prop drilling between them.

Prerequisites

Standalone components, signal(), and computed() — comfortable from the Todo App project above.
The @Component decorator and its imports array — every component below only imports what its own template actually uses.
@Input()/@Output() fundamentals — used throughout CartItemComponent.
Array methods — find, map, and filter, used throughout the service and the cart totals.
Dependency injection (@Injectable, providedIn: 'root', inject()) is new here — it is introduced from the ground up in this tutorial.

Project Structure

The cart service lives in its own file so any component in the tree can inject it. ProductListComponent and CartSummaryComponent are true siblings — both rendered directly inside AppComponent, next to each other — which is exactly the layout that would otherwise force prop drilling.

src/app/
  cart.service.ts             // @Injectable({ providedIn: 'root' }) — items, methods, and computed getters
  products.ts                  // Static list of products available to add to the cart
  product-list/
    product-list.component.ts  // Reads nothing from the cart as an @Input; only calls service methods
  cart-item/
    cart-item.component.ts     // One cart row — @Input() in, @Output() out
  cart-summary/
    cart-summary.component.ts  // Reads cart items via the service + renders a list of CartItemComponent
  app.component.ts              // Renders ProductListComponent and CartSummaryComponent side by side
  app.component.css              // Shared dark-theme styling
main.ts                          // Bootstraps <AppComponent>

/* app.component.css */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #1a1d23;
  color: #e8e8e8;
  display: flex;
  justify-content: center;
  padding: 40px 16px;
}

.shop-app { width: 100%; max-width: 480px; background: #23262e; border-radius: 10px; padding: 24px; }
.shop-app h1 { margin-bottom: 16px; font-size: 1.5rem; }
.shop-app h2 { margin: 16px 0 10px; font-size: 1.1rem; }

.product-row, .cart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #3a3f4b;
}

.product-row span:first-child, .cart-row span:first-child { flex: 1; }

.product-row button, .cart-row button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #dd0031;
  color: white;
  cursor: pointer;
  font-size: 0.85rem;
}

.cart-row button { background: #5a3a3a; }

.cart-row input[type="number"] {
  width: 48px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #3a3f4b;
  background: #1a1d23;
  color: #e8e8e8;
  text-align: center;
}

.cart-total { margin-top: 12px; font-weight: bold; text-align: right; font-size: 1.1rem; }
.cart-empty { color: #888; padding: 8px 0; }

Step 1: Define Product Data and the Cart State Shape

The product catalog is static data, not state — it never changes while the app runs, so it lives as a plain exported array rather than in a signal. The cart is designed as a flat array of CartLine objects (a Product plus a quantity), so the service's methods can lean on ordinary array methods instead of juggling object-key bookkeeping.

// products.ts
export interface Product {
  id: number;
  name: string;
  price: number;
}

export const PRODUCTS: Product[] = [
  { id: 1, name: 'Wireless Mouse', price: 24.99 },
  { id: 2, name: 'Mechanical Keyboard', price: 89.99 },
  { id: 3, name: 'USB-C Hub', price: 34.5 },
  { id: 4, name: 'Laptop Stand', price: 42.0 },
];

// Cart line shape, used throughout cart.service.ts:
// CartLine = Product & { quantity: number }
//
// Deliberately a flat array (not an object keyed by id) so the service's
// methods below can lean on plain array methods (find/map/filter) instead of
// juggling object-key bookkeeping

Step 2: Create the CartService with Signals

providedIn: 'root' registers exactly one shared instance for the whole app, created lazily the first time any component injects it. The writable signal is kept private, and only a read-only view of it (.asReadonly()) is exposed publicly — the same encapsulation a private field plus a public getter would give you in plain TypeScript, and it is what forces every mutation to flow through the methods below instead of a component reaching in and calling .set() on the cart itself.

// cart.service.ts
import { Injectable, computed, signal } from '@angular/core';
import { Product } from './products';

export interface CartLine extends Product {
  quantity: number;
}

@Injectable({
  // providedIn: 'root' registers ONE shared instance app-wide — this is what
  // makes CartService reachable from two totally unrelated sibling
  // components without either one being the other's parent or passing
  // anything through a common ancestor
  providedIn: 'root',
})
export class CartService {
  // Private writable signal — nothing outside this class can call
  // .set()/.update() on it directly, which is what keeps every cart
  // mutation funneled through the methods below
  private readonly itemsSignal = signal<CartLine[]>([]);

  // Exposed read-only — components can read items() but cannot reassign it
  readonly items = this.itemsSignal.asReadonly();

  // computed() getters — always derived from itemsSignal, never stored
  // separately, so they can never drift out of sync with the actual cart
  readonly itemCount = computed(() =>
    this.itemsSignal().reduce((sum, item) => sum + item.quantity, 0)
  );
  readonly subtotal = computed(() =>
    this.itemsSignal().reduce((sum, item) => sum + item.price * item.quantity, 0)
  );

  addItem(product: Product): void {
    const existing = this.itemsSignal().find((item) => item.id === product.id);

    if (existing) {
      // Already in the cart — bump its quantity instead of adding a
      // duplicate row
      this.updateQuantity(product.id, existing.quantity + 1);
    } else {
      // First time this product is added — spread its fields and start
      // quantity at 1; a brand-new array is built since signals compare by
      // reference, same rule as the Todo App's tasks signal
      this.itemsSignal.update((current) => [...current, { ...product, quantity: 1 }]);
    }
  }

  removeItem(id: number): void {
    this.itemsSignal.update((current) => current.filter((item) => item.id !== id));
  }

  updateQuantity(id: number, quantity: number): void {
    if (quantity < 1) {
      // Treat "quantity 0 or less" as a removal rather than leaving a
      // useless zero-quantity row in the cart
      this.removeItem(id);
      return;
    }
    this.itemsSignal.update((current) =>
      current.map((item) => (item.id === id ? { ...item, quantity } : item))
    );
  }
}

How State Flows Through the Service

Click Run to see what this code prints.

Step 3: Build the Product List

ProductListComponent calls inject(CartService) directly — no @Input() connects it to the cart, and no common ancestor passes anything down. That single line is what a real component needs to reach into fully shared, app-wide state.

// product-list/product-list.component.ts
import { Component, inject } from '@angular/core';
import { PRODUCTS } from '../products';
import { CartService } from '../cart.service';

@Component({
  selector: 'app-product-list',
  standalone: true,
  templateUrl: './product-list.component.html',
})
export class ProductListComponent {
  // inject() reaches into Angular's dependency injection tree and returns
  // the exact same CartService singleton every other component that
  // injects it also gets — "protected" so the template can read it directly
  protected readonly cart = inject(CartService);
  protected readonly products = PRODUCTS;
}

<!-- product-list/product-list.component.html -->
<div class="product-list">
  <h2>Products</h2>
  @for (product of products; track product.id) {
    <div class="product-row">
      <span>{{ product.name }}</span>
      <span>{{ '$' + product.price.toFixed(2) }}</span>
      <button type="button" (click)="cart.addItem(product)">Add to Cart</button>
    </div>
  }
</div>

Step 4: Build a CartItem Component with @Input/@Output

Rather than have CartSummaryComponent build every row's markup inline, CartItemComponent is its own component — it receives one cart line as an @Input() and emits quantityChange/remove through @Output(), the same inputs-in / events-out shape as TodoItemComponent in the previous project. This keeps CartItemComponent reusable and fully decoupled from CartService: it doesn't know the service exists at all.

// cart-item/cart-item.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CartLine } from '../cart.service';

@Component({
  selector: 'app-cart-item',
  standalone: true,
  templateUrl: './cart-item.component.html',
})
export class CartItemComponent {
  // CartItemComponent deliberately knows nothing about CartService — it
  // only deals in @Input()/@Output(), so it could just as easily be reused
  // with cart line data that came from somewhere other than this service
  @Input({ required: true }) item!: CartLine;
  @Output() quantityChange = new EventEmitter<number>();
  @Output() remove = new EventEmitter<number>();
}

<!-- cart-item/cart-item.component.html -->
<div class="cart-row">
  <span>{{ item.name }}</span>
  <!-- $any(...) casts event.target past strict template type-checking so
       .value can be read directly — a common, narrowly-scoped escape hatch
       for native DOM event targets Angular's compiler can't infer on its own -->
  <input
    type="number"
    min="1"
    [value]="item.quantity"
    (input)="quantityChange.emit(+$any($event.target).value)"
  />
  <span>{{ '$' + (item.price * item.quantity).toFixed(2) }}</span>
  <button type="button" (click)="remove.emit(item.id)">Remove</button>
</div>

Step 5: Build the CartSummary Component

CartSummaryComponent injects the exact same CartService instance ProductListComponent injected in Step 3 — proof that two unrelated siblings can share state through DI with zero props passed between them. CartItemComponent's emitted events are wired straight to service methods, since a service method is just a function and can be used as an event handler directly.

// cart-summary/cart-summary.component.ts
import { Component, inject } from '@angular/core';
import { CartService } from '../cart.service';
import { CartItemComponent } from '../cart-item/cart-item.component';

@Component({
  selector: 'app-cart-summary',
  standalone: true,
  imports: [CartItemComponent],
  templateUrl: './cart-summary.component.html',
})
export class CartSummaryComponent {
  // Reads state straight from the shared service — nothing passed it this
  // data from AppComponent, because CartService is DI-resolved
  // independently in every component that injects it
  protected readonly cart = inject(CartService);
}

<!-- cart-summary/cart-summary.component.html -->
<div class="cart-summary">
  <h2>Cart</h2>

  @if (cart.items().length === 0) {
    <p class="cart-empty">Your cart is empty.</p>
  }

  @for (item of cart.items(); track item.id) {
    <app-cart-item
      [item]="item"
      (quantityChange)="cart.updateQuantity(item.id, $event)"
      (remove)="cart.removeItem(item.id)"
    />
  }

  @if (cart.items().length > 0) {
    <p class="cart-total">{{ 'Total: $' + cart.subtotal().toFixed(2) }}</p>
  }
</div>

Step 6: Wire It All Together in AppComponent

AppComponent never injects CartService at all — it does not need to. It just renders ProductListComponent and CartSummaryComponent side by side; both independently resolve the same singleton the first time they inject it, which is what "shared through DI" really means: no data flows through AppComponent, only components.

// app.component.ts
import { Component } from '@angular/core';
import { ProductListComponent } from './product-list/product-list.component';
import { CartSummaryComponent } from './cart-summary/cart-summary.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ProductListComponent, CartSummaryComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

<!-- app.component.html -->
<div class="shop-app">
  <h1>Shop</h1>
  <app-product-list />
  <app-cart-summary />
</div>

Complete Code

Here is the complete project — every file, fully assembled from the steps above, in the order they would sit in a real Angular CLI-generated project.

// products.ts
export interface Product {
  id: number;
  name: string;
  price: number;
}

export const PRODUCTS: Product[] = [
  { id: 1, name: 'Wireless Mouse', price: 24.99 },
  { id: 2, name: 'Mechanical Keyboard', price: 89.99 },
  { id: 3, name: 'USB-C Hub', price: 34.5 },
  { id: 4, name: 'Laptop Stand', price: 42.0 },
];

// cart.service.ts
import { Injectable, computed, signal } from '@angular/core';
import { Product } from './products';

export interface CartLine extends Product {
  quantity: number;
}

@Injectable({ providedIn: 'root' })
export class CartService {
  private readonly itemsSignal = signal<CartLine[]>([]);
  readonly items = this.itemsSignal.asReadonly();

  readonly itemCount = computed(() => this.itemsSignal().reduce((sum, item) => sum + item.quantity, 0));
  readonly subtotal = computed(() => this.itemsSignal().reduce((sum, item) => sum + item.price * item.quantity, 0));

  addItem(product: Product): void {
    const existing = this.itemsSignal().find((item) => item.id === product.id);
    if (existing) {
      this.updateQuantity(product.id, existing.quantity + 1);
    } else {
      this.itemsSignal.update((current) => [...current, { ...product, quantity: 1 }]);
    }
  }

  removeItem(id: number): void {
    this.itemsSignal.update((current) => current.filter((item) => item.id !== id));
  }

  updateQuantity(id: number, quantity: number): void {
    if (quantity < 1) {
      this.removeItem(id);
      return;
    }
    this.itemsSignal.update((current) => current.map((item) => (item.id === id ? { ...item, quantity } : item)));
  }
}

// product-list/product-list.component.ts
import { Component, inject } from '@angular/core';
import { PRODUCTS } from '../products';
import { CartService } from '../cart.service';

@Component({
  selector: 'app-product-list',
  standalone: true,
  templateUrl: './product-list.component.html',
})
export class ProductListComponent {
  protected readonly cart = inject(CartService);
  protected readonly products = PRODUCTS;
}

<!-- product-list/product-list.component.html -->
<div class="product-list">
  <h2>Products</h2>
  @for (product of products; track product.id) {
    <div class="product-row">
      <span>{{ product.name }}</span>
      <span>{{ '$' + product.price.toFixed(2) }}</span>
      <button type="button" (click)="cart.addItem(product)">Add to Cart</button>
    </div>
  }
</div>

// cart-item/cart-item.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CartLine } from '../cart.service';

@Component({
  selector: 'app-cart-item',
  standalone: true,
  templateUrl: './cart-item.component.html',
})
export class CartItemComponent {
  @Input({ required: true }) item!: CartLine;
  @Output() quantityChange = new EventEmitter<number>();
  @Output() remove = new EventEmitter<number>();
}

<!-- cart-item/cart-item.component.html -->
<div class="cart-row">
  <span>{{ item.name }}</span>
  <input type="number" min="1" [value]="item.quantity" (input)="quantityChange.emit(+$any($event.target).value)" />
  <span>{{ '$' + (item.price * item.quantity).toFixed(2) }}</span>
  <button type="button" (click)="remove.emit(item.id)">Remove</button>
</div>

// cart-summary/cart-summary.component.ts
import { Component, inject } from '@angular/core';
import { CartService } from '../cart.service';
import { CartItemComponent } from '../cart-item/cart-item.component';

@Component({
  selector: 'app-cart-summary',
  standalone: true,
  imports: [CartItemComponent],
  templateUrl: './cart-summary.component.html',
})
export class CartSummaryComponent {
  protected readonly cart = inject(CartService);
}

<!-- cart-summary/cart-summary.component.html -->
<div class="cart-summary">
  <h2>Cart</h2>
  @if (cart.items().length === 0) {
    <p class="cart-empty">Your cart is empty.</p>
  }
  @for (item of cart.items(); track item.id) {
    <app-cart-item [item]="item" (quantityChange)="cart.updateQuantity(item.id, $event)" (remove)="cart.removeItem(item.id)" />
  }
  @if (cart.items().length > 0) {
    <p class="cart-total">{{ 'Total: $' + cart.subtotal().toFixed(2) }}</p>
  }
</div>

// app.component.ts
import { Component } from '@angular/core';
import { ProductListComponent } from './product-list/product-list.component';
import { CartSummaryComponent } from './cart-summary/cart-summary.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ProductListComponent, CartSummaryComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Sample Run

Sample Interaction

Click Run to see what this code prints.

Extend This Project

Add a checkout() method to CartService that clears itemsSignal and shows a thank-you message.
Persist items to localStorage inside CartService with an effect(), the same pattern used in the Todo App project.
Add quantity stepper +/- buttons to CartItemComponent instead of a raw number input, emitting quantityChange with item.quantity + 1 or - 1.
Add a navbar component that injects CartService to show a live itemCount() badge, proving the shared instance works from a completely different part of the tree.
Split validation (e.g. a max-quantity limit) out of CartService and into its own small injectable helper class that both the service and CartItemComponent's parent can use.

Summary

You built a shopping cart where two sibling components — ProductListComponent and CartSummaryComponent — share one piece of state through a signal-based CartService, with CartItemComponent demonstrating clean @Input()-in / @Output()-out composition. This combination — a providedIn: 'root' service for "who can reach the state," and @Input()/@Output() for "how components without shared state cooperate" — is the standard shape of a small-to-medium Angular application.