Angular State Per Component

Angular Per-Component State (Store Pattern)

This project uses a plain @Injectable() class as a store — no NgRx ComponentStore. Each feature area gets its own store class, provided at the component level so Angular creates a fresh instance per component tree. Use an InjectionToken only when you need to swap implementations (e.g. testing, multi-tenant); otherwise provide the class directly.

When to Use

• A component (or subtree) owns its own data and lifecycle
• Multiple child components need to share data from a single source
• You need reactive data (HTTP, signals, RxJS streams)

---

Store Structure

1. Create the store class

// my-feature.store.ts
import { inject, Injectable, signal, computed } from '@angular/core';
import { httpResource } from '@angular/common/http';
import { toSignal } from '@angular/core/rxjs-interop';
import { BehaviorSubject, switchMap } from 'rxjs';
import { MyService } from '@core/services';

@Injectable()
export class MyFeatureStore {
  // ─── DI (use inject(), never constructor params) ───────────────────────────
  private myService = inject(MyService);

  // ─── Input signals (drive reactive requests) ───────────────────────────────
  itemId = signal<number>(0);

  // ─── Modern: httpResource (auto-fetches when signals change) ──────────────
  data = httpResource<ItemModel>(() => {
    const id = this.itemId();
    return id ? { url: this.myService.getUrl() + `${id}` } : undefined;
  });

  // ─── RxJS style (BehaviorSubject + pipe + toSignal) ───────────────────────
  reload$ = new BehaviorSubject<number>(0);

  items$ = this.reload$.pipe(
    switchMap(() => this.myService.list()),
    // shareReplay(1) if multiple subscribers
  );
  items = toSignal(this.items$, { initialValue: [] });

  // ─── Derived / computed state ──────────────────────────────────────────────
  activeItems = computed(() => (this.items() || []).filter(i => i.active));

  // ─── UI state ─────────────────────────────────────────────────────────────
  // Note: httpResource already exposes data.isLoading() — no need for a separate isLoading signal.
  selectedId = signal<number | null>(null);

  // ─── Actions ──────────────────────────────────────────────────────────────
  reload() {
    this.reload$.next(this.reload$.value + 1);
  }

  select(id: number) {
    this.selectedId.set(id);
  }
}