Build a Simple Signals Store Service (Cart Example)

A Signals store is often just a service that holds signals and exposes safe methods. ## Step 1: Create a CartStore service ```ts import { Injectable, computed, signal } from '@angular/core'; export type CartItem = { id: number; title: string; price: number; qty: number }; @Injectable({ providedIn: 'root' }) export class CartStore { private itemsSig = signal<CartItem[]>([]); items = computed(() => this.itemsSig()); count = computed(() => this.itemsSig().reduce((sum, i) => sum + i.qty, 0)); total = computed(() => this.itemsSig().reduce((sum, i) => sum + i.price * i.qty, 0)); add(item: Omit<CartItem, 'qty'>) { this.itemsSig.update(list => { const found = list.find(x => x.id === item.id); if (found) { return list.map(x => (x.id === item.id ? { ...x, qty: x.qty + 1 } : x)); } return [...list, { ...item, qty: 1 }]; }); } remove(id: number) { this.itemsSig.update(list => list.filter(x => x.id !== id)); } clear() { this.itemsSig.set([]); } } ``` ## Step 2: Use it from any component ```ts import { Component } from '@angular/core'; import { CartStore } from './cart.store'; @Component({ selector: 'app-cart-summary', standalone: true, template: ` <p>Items: {{ cart.count() }}</p> <p>Total: ${{ cart.total() }}</p> `, }) export class CartSummaryComponent { constructor(public cart: CartStore) {} } ``` ## Why this pattern is powerful - no boilerplate actions/reducers - easy to read - computed values stay consistent > Next: NgRx explained simply and when it’s worth it.