What are the differences between State Management libraries in Angular?

import { Component, Injectable, computed, inject, signal } from "@angular/core";

interface Todo {
  id: number;
  title: string;
  done: boolean;
}

// The "no library" option: an injectable service with a private writable signal,
// public read-only views, and methods as the only way to change state.
@Injectable({ providedIn: "root" })
export class TodoService {
  private readonly state = signal({
    todos: [
      { id: 1, title: "Write reducer", done: true },
      { id: 2, title: "Write effect", done: false },
    ] as Todo[],
    filter: "all" as "all" | "open",
  });

  readonly filter = computed(() => this.state().filter);
  readonly visible = computed(() => {
    const { todos, filter } = this.state();
    return filter === "open" ? todos.filter((t) => !t.done) : todos;
  });
  readonly openCount = computed(() => this.state().todos.filter((t) => !t.done).length);

  toggle(id: number) {
    this.state.update((s) => ({ ...s, todos: s.todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)) }));
  }
  setFilter(filter: "all" | "open") {
    this.state.update((s) => ({ ...s, filter }));
  }
}

@Component({
  selector: "app-counter-badge",
  template: `<span>Badge sees {{ todos.openCount() }} open</span>`,
})
export class CounterBadge {
  // A second component injects the SAME root instance, so the state is shared.
  todos = inject(TodoService);
}

@Component({
  selector: "app-root",
  imports: [CounterBadge],
  template: `
    <app-counter-badge />
    <button (click)="todos.setFilter(todos.filter() === 'all' ? 'open' : 'all')">Filter: {{ todos.filter() }}</button>
    <ul>
      @for (t of todos.visible(); track t.id) {
        <li (click)="todos.toggle(t.id)">{{ t.done ? "[x]" : "[ ]" }} {{ t.title }}</li>
      }
    </ul>
  `,
})
export class AppComponent {
  todos = inject(TodoService);
}

import { Component, computed, inject } from "@angular/core";
import { patchState, signalStore, withComputed, withHooks, withMethods, withState } from "@ngrx/signals";
import { rxMethod } from "@ngrx/signals/rxjs-interop";
import { Observable, delay, of, pipe, switchMap, tap } from "rxjs";

interface Todo {
  id: number;
  title: string;
  done: boolean;
}

// Stands in for HttpClient.
function fetchTodos(): Observable<Todo[]> {
  return of([
    { id: 1, title: "Write reducer", done: true },
    { id: 2, title: "Write effect", done: false },
  ]).pipe(delay(200));
}

// A SignalStore: state, derived state and methods in one injectable, built from features.
export const TodoStore = signalStore(
  { providedIn: "root" },
  withState({ todos: [] as Todo[], filter: "all" as "all" | "open", loading: false }),
  withComputed(({ todos, filter }) => ({
    visible: computed(() => (filter() === "open" ? todos().filter((t) => !t.done) : todos())),
    openCount: computed(() => todos().filter((t) => !t.done).length),
  })),
  withMethods((store) => ({
    toggle(id: number) {
      // patchState is the only way to write: the state signals are read-only outside the store.
      patchState(store, { todos: store.todos().map((t) => (t.id === id ? { ...t, done: !t.done } : t)) });
    },
    setFilter(filter: "all" | "open") {
      patchState(store, { filter });
    },
    // rxMethod: an RxJS pipeline you can call like a function (here with no argument).
    load: rxMethod<void>(
      pipe(
        tap(() => patchState(store, { loading: true })),
        switchMap(() => fetchTodos()),
        tap((todos) => patchState(store, { todos, loading: false })),
      ),
    ),
  })),
  withHooks({
    onInit(store) {
      store.load();
    },
  }),
);

@Component({
  selector: "app-root",
  template: `
    <button (click)="store.setFilter(store.filter() === 'all' ? 'open' : 'all')">Filter: {{ store.filter() }}</button>
    <p>{{ store.loading() ? "loading..." : store.openCount() + " open" }}</p>
    <ul>
      @for (t of store.visible(); track t.id) {
        <li (click)="store.toggle(t.id)">{{ t.done ? "[x]" : "[ ]" }} {{ t.title }}</li>
      }
    </ul>
  `,
})
export class AppComponent {
  store = inject(TodoStore);
}