Angular State Management

1---
2name: angular-state-management
3description: Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
4risk: safe
5source: self
6---
7 
8# Angular State Management
9 
10Comprehensive guide to modern Angular state management patterns, from Signal-based local state to global stores and server state synchronization.
11 
12## When to Use This Skill
13 
14- Setting up global state management in Angular
15- Choosing between Signals, NgRx, or Akita
16- Managing component-level stores
17- Implementing optimistic updates
18- Debugging state-related issues
19- Migrating from legacy state patterns
20 
21## Do Not Use This Skill When
22 
23- The task is unrelated to Angular state management
24- You need React state management → use `react-state-management`
25 
26---
27 
28## Core Concepts
29 
30### State Categories
31 
32| Type             | Description                  | Solutions             |
33| ---------------- | ---------------------------- | --------------------- |
34| **Local State**  | Component-specific, UI state | Signals, `signal()`   |
35| **Shared State** | Between related components   | Signal services       |
36| **Global State** | App-wide, complex            | NgRx, Akita, Elf      |
37| **Server State** | Remote data, caching         | NgRx Query, RxAngular |
38| **URL State**    | Route parameters             | ActivatedRoute        |
39| **Form State**   | Input values, validation     | Reactive Forms        |
40 
41### Selection Criteria
42 
43```
44Small app, simple state → Signal Services
45Medium app, moderate state → Component Stores
46Large app, complex state → NgRx Store
47Heavy server interaction → NgRx Query + Signal Services
48Real-time updates → RxAngular + Signals
49```
50 
51---
52 
53## Quick Start: Signal-Based State
54 
55### Pattern 1: Simple Signal Service
56 
57```typescript
58// services/counter.service.ts
59import { Injectable, signal, computed } from "@angular/core";
60 
61@Injectable({ providedIn: "root" })
62export class CounterService {
63  // Private writable signals
64  private _count = signal(0);
65 
66  // Public read-only
67  readonly count = this._count.asReadonly();
68  readonly doubled = computed(() => this._count() * 2);
69  readonly isPositive = computed(() => this._count() > 0);
70 
71  increment() {
72    this._count.update((v) => v + 1);
73  }
74 
75  decrement() {
76    this._count.update((v) => v - 1);
77  }
78 
79  reset() {
80    this._count.set(0);
81  }
82}
83 
84// Usage in component
85@Component({
86  template: `
87    <p>Count: {{ counter.count() }}</p>
88    <p>Doubled: {{ counter.doubled() }}</p>
89    <button (click)="counter.increment()">+</button>
90  `,
91})
92export class CounterComponent {
93  counter = inject(CounterService);
94}
95```
96 
97### Pattern 2: Feature Signal Store
98 
99```typescript
100// stores/user.store.ts
101import { Injectable, signal, computed, inject } from "@angular/core";
102import { HttpClient } from "@angular/common/http";
103import { toSignal } from "@angular/core/rxjs-interop";
104 
105interface User {
106  id: string;
107  name: string;
108  email: string;
109}
110 
111interface UserState {
112  user: User | null;
113  loading: boolean;
114  error: string | null;
115}
116 
117@Injectable({ providedIn: "root" })
118export class UserStore {
119  private http = inject(HttpClient);
120 
121  // State signals
122  private _user = signal<User | null>(null);
123  private _loading = signal(false);
124  private _error = signal<string | null>(null);
125 
126  // Selectors (read-only computed)
127  readonly user = computed(() => this._user());
128  readonly loading = computed(() => this._loading());
129  readonly error = computed(() => this._error());
130  readonly isAuthenticated = computed(() => this._user() !== null);
131  readonly displayName = computed(() => this._user()?.name ?? "Guest");
132 
133  // Actions
134  async loadUser(id: string) {
135    this._loading.set(true);
136    this._error.set(null);
137 
138    try {
139      const user = await fetch(`/api/users/${id}`).then((r) => r.json());
140      this._user.set(user);
141    } catch (e) {
142      this._error.set("Failed to load user");
143    } finally {
144      this._loading.set(false);
145    }
146  }
147 
148  updateUser(updates: Partial<User>) {
149    this._user.update((user) => (user ? { ...user, ...updates } : null));
150  }
151 
152  logout() {
153    this._user.set(null);
154    this._error.set(null);
155  }
156}
157```
158 
159### Pattern 3: SignalStore (NgRx Signals)
160 
161```typescript
162// stores/products.store.ts
163import {
164  signalStore,
165  withState,
166  withMethods,
167  withComputed,
168  patchState,
169} from "@ngrx/signals";
170import { inject } from "@angular/core";
171import { ProductService } from "./product.service";
172 
173interface ProductState {
174  products: Product[];
175  loading: boolean;
176  filter: string;
177}
178 
179const initialState: ProductState = {
180  products: [],
181  loading: false,
182  filter: "",
183};
184 
185export const ProductStore = signalStore(
186  { providedIn: "root" },
187 
188  withState(initialState),
189 
190  withComputed((store) => ({
191    filteredProducts: computed(() => {
192      const filter = store.filter().toLowerCase();
193      return store
194        .products()
195        .filter((p) => p.name.toLowerCase().includes(filter));
196    }),
197    totalCount: computed(() => store.products().length),
198  })),
199 
200  withMethods((store, productService = inject(ProductService)) => ({
201    async loadProducts() {
202      patchState(store, { loading: true });
203 
204      try {
205        const products = await productService.getAll();
206        patchState(store, { products, loading: false });
207      } catch {
208        patchState(store, { loading: false });
209      }
210    },
211 
212    setFilter(filter: string) {
213      patchState(store, { filter });
214    },
215 
216    addProduct(product: Product) {
217      patchState(store, ({ products }) => ({
218        products: [...products, product],
219      }));
220    },
221  })),
222);
223 
224// Usage
225@Component({
226  template: `
227    <input (input)="store.setFilter($event.target.value)" />
228    @if (store.loading()) {
229      <app-spinner />
230    } @else {
231      @for (product of store.filteredProducts(); track product.id) {
232        <app-product-card [product]="product" />
233      }
234    }
235  `,
236})
237export class ProductListComponent {
238  store = inject(ProductStore);
239 
240  ngOnInit() {
241    this.store.loadProducts();
242  }
243}
244```
245 
246---
247 
248## NgRx Store (Global State)
249 
250### Setup
251 
252```typescript
253// store/app.state.ts
254import { ActionReducerMap } from "@ngrx/store";
255 
256export interface AppState {
257  user: UserState;
258  cart: CartState;
259}
260 
261export const reducers: ActionReducerMap<AppState> = {
262  user: userReducer,
263  cart: cartReducer,
264};
265 
266// main.ts
267bootstrapApplication(AppComponent, {
268  providers: [
269    provideStore(reducers),
270    provideEffects([UserEffects, CartEffects]),
271    provideStoreDevtools({ maxAge: 25 }),
272  ],
273});
274```
275 
276### Feature Slice Pattern
277 
278```typescript
279// store/user/user.actions.ts
280import { createActionGroup, props, emptyProps } from "@ngrx/store";
281 
282export const UserActions = createActionGroup({
283  source: "User",
284  events: {
285    "Load User": props<{ userId: string }>(),
286    "Load User Success": props<{ user: User }>(),
287    "Load User Failure": props<{ error: string }>(),
288    "Update User": props<{ updates: Partial<User> }>(),
289    Logout: emptyProps(),
290  },
291});
292```
293 
294```typescript
295// store/user/user.reducer.ts
296import { createReducer, on } from "@ngrx/store";
297import { UserActions } from "./user.actions";
298 
299export interface UserState {
300  user: User | null;
301  loading: boolean;
302  error: string | null;
303}
304 
305const initialState: UserState = {
306  user: null,
307  loading: false,
308  error: null,
309};
310 
311export const userReducer = createReducer(
312  initialState,
313 
314  on(UserActions.loadUser, (state) => ({
315    ...state,
316    loading: true,
317    error: null,
318  })),
319 
320  on(UserActions.loadUserSuccess, (state, { user }) => ({
321    ...state,
322    user,
323    loading: false,
324  })),
325 
326  on(UserActions.loadUserFailure, (state, { error }) => ({
327    ...state,
328    loading: false,
329    error,
330  })),
331 
332  on(UserActions.logout, () => initialState),
333);
334```
335 
336```typescript
337// store/user/user.selectors.ts
338import { createFeatureSelector, createSelector } from "@ngrx/store";
339import { UserState } from "./user.reducer";
340 
341export const selectUserState = createFeatureSelector<UserState>("user");
342 
343export const selectUser = createSelector(
344  selectUserState,
345  (state) => state.user,
346);
347 
348export const selectUserLoading = createSelector(
349  selectUserState,
350  (state) => state.loading,
351);
352 
353export const selectIsAuthenticated = createSelector(
354  selectUser,
355  (user) => user !== null,
356);
357```
358 
359```typescript
360// store/user/user.effects.ts
361import { Injectable, inject } from "@angular/core";
362import { Actions, createEffect, ofType } from "@ngrx/effects";
363import { switchMap, map, catchError, of } from "rxjs";
364 
365@Injectable()
366export class UserEffects {
367  private actions$ = inject(Actions);
368  private userService = inject(UserService);
369 
370  loadUser$ = createEffect(() =>
371    this.actions$.pipe(
372      ofType(UserActions.loadUser),
373      switchMap(({ userId }) =>
374        this.userService.getUser(userId).pipe(
375          map((user) => UserActions.loadUserSuccess({ user })),
376          catchError((error) =>
377            of(UserActions.loadUserFailure({ error: error.message })),
378          ),
379        ),
380      ),
381    ),
382  );
383}
384```
385 
386### Component Usage
387 
388```typescript
389@Component({
390  template: `
391    @if (loading()) {
392      <app-spinner />
393    } @else if (user(); as user) {
394      <h1>Welcome, {{ user.name }}</h1>
395      <button (click)="logout()">Logout</button>
396    }
397  `,
398})
399export class HeaderComponent {
400  private store = inject(Store);
401 
402  user = this.store.selectSignal(selectUser);
403  loading = this.store.selectSignal(selectUserLoading);
404 
405  logout() {
406    this.store.dispatch(UserActions.logout());
407  }
408}
409```
410 
411---
412 
413## RxJS-Based Patterns
414 
415### Component Store (Local Feature State)
416 
417```typescript
418// stores/todo.store.ts
419import { Injectable } from "@angular/core";
420import { ComponentStore } from "@ngrx/component-store";
421import { switchMap, tap, catchError, EMPTY } from "rxjs";
422 
423interface TodoState {
424  todos: Todo[];
425  loading: boolean;
426}
427 
428@Injectable()
429export class TodoStore extends ComponentStore<TodoState> {
430  constructor(private todoService: TodoService) {
431    super({ todos: [], loading: false });
432  }
433 
434  // Selectors
435  readonly todos$ = this.select((state) => state.todos);
436  readonly loading$ = this.select((state) => state.loading);
437  readonly completedCount$ = this.select(
438    this.todos$,
439    (todos) => todos.filter((t) => t.completed).length,
440  );
441 
442  // Updaters
443  readonly addTodo = this.updater((state, todo: Todo) => ({
444    ...state,
445    todos: [...state.todos, todo],
446  }));
447 
448  readonly toggleTodo = this.updater((state, id: string) => ({
449    ...state,
450    todos: state.todos.map((t) =>
451      t.id === id ? { ...t, completed: !t.completed } : t,
452    ),
453  }));
454 
455  // Effects
456  readonly loadTodos = this.effect<void>((trigger$) =>
457    trigger$.pipe(
458      tap(() => this.patchState({ loading: true })),
459      switchMap(() =>
460        this.todoService.getAll().pipe(
461          tap({
462            next: (todos) => this.patchState({ todos, loading: false }),
463            error: () => this.patchState({ loading: false }),
464          }),
465          catchError(() => EMPTY),
466        ),
467      ),
468    ),
469  );
470}
471```
472 
473---
474 
475## Server State with Signals
476 
477### HTTP + Signals Pattern
478 
479```typescript
480// services/api.service.ts
481import { Injectable, signal, inject } from "@angular/core";
482import { HttpClient } from "@angular/common/http";
483import { toSignal } from "@angular/core/rxjs-interop";
484 
485interface ApiState<T> {
486  data: T | null;
487  loading: boolean;
488  error: string | null;
489}
490 
491@Injectable({ providedIn: "root" })
492export class ProductApiService {
493  private http = inject(HttpClient);
494 
495  private _state = signal<ApiState<Product[]>>({
496    data: null,
497    loading: false,
498    error: null,
499  });
500 
501  readonly products = computed(() => this._state().data ?? []);
502  readonly loading = computed(() => this._state().loading);
503  readonly error = computed(() => this._state().error);
504 
505  async fetchProducts(): Promise<void> {
506    this._state.update((s) => ({ ...s, loading: true, error: null }));
507 
508    try {
509      const data = await firstValueFrom(
510        this.http.get<Product[]>("/api/products"),
511      );
512      this._state.update((s) => ({ ...s, data, loading: false }));
513    } catch (e) {
514      this._state.update((s) => ({
515        ...s,
516        loading: false,
517        error: "Failed to fetch products",
518      }));
519    }
520  }
521 
522  // Optimistic update
523  async deleteProduct(id: string): Promise<void> {
524    const previousData = this._state().data;
525 
526    // Optimistically remove
527    this._state.update((s) => ({
528      ...s,
529      data: s.data?.filter((p) => p.id !== id) ?? null,
530    }));
531 
532    try {
533      await firstValueFrom(this.http.delete(`/api/products/${id}`));
534    } catch {
535      // Rollback on error
536      this._state.update((s) => ({ ...s, data: previousData }));
537    }
538  }
539}
540```
541 
542---
543 
544## Best Practices
545 
546### Do's
547 
548| Practice                           | Why                                |
549| ---------------------------------- | ---------------------------------- |
550| Use Signals for local state        | Simple, reactive, no subscriptions |
551| Use `computed()` for derived data  | Auto-updates, memoized             |
552| Colocate state with feature        | Easier to maintain                 |
553| Use NgRx for complex flows         | Actions, effects, devtools         |
554| Prefer `inject()` over constructor | Cleaner, works in factories        |
555 
556### Don'ts
557 
558| Anti-Pattern                      | Instead                                               |
559| --------------------------------- | ----------------------------------------------------- |
560| Store derived data                | Use `computed()`                                      |
561| Mutate signals directly           | Use `set()` or `update()`                             |
562| Over-globalize state              | Keep local when possible                              |
563| Mix RxJS and Signals chaotically  | Choose primary, bridge with `toSignal`/`toObservable` |
564| Subscribe in components for state | Use template with signals                             |
565 
566---
567 
568## Migration Path
569 
570### From BehaviorSubject to Signals
571 
572```typescript
573// Before: RxJS-based
574@Injectable({ providedIn: "root" })
575export class OldUserService {
576  private userSubject = new BehaviorSubject<User | null>(null);
577  user$ = this.userSubject.asObservable();
578 
579  setUser(user: User) {
580    this.userSubject.next(user);
581  }
582}
583 
584// After: Signal-based
585@Injectable({ providedIn: "root" })
586export class UserService {
587  private _user = signal<User | null>(null);
588  readonly user = this._user.asReadonly();
589 
590  setUser(user: User) {
591    this._user.set(user);
592  }
593}
594```
595 
596### Bridging Signals and RxJS
597 
598```typescript
599import { toSignal, toObservable } from '@angular/core/rxjs-interop';
600 
601// Observable → Signal
602@Component({...})
603export class ExampleComponent {
604  private route = inject(ActivatedRoute);
605 
606  // Convert Observable to Signal
607  userId = toSignal(
608    this.route.params.pipe(map(p => p['id'])),
609    { initialValue: '' }
610  );
611}
612 
613// Signal → Observable
614export class DataService {
615  private filter = signal('');
616 
617  // Convert Signal to Observable
618  filter$ = toObservable(this.filter);
619 
620  filteredData$ = this.filter$.pipe(
621    debounceTime(300),
622    switchMap(filter => this.http.get(`/api/data?q=${filter}`))
623  );
624}
625```
626 
627---
628 
629## Resources
630 
631- [Angular Signals Guide](https://angular.dev/guide/signals)
632- [NgRx Documentation](https://ngrx.io/)
633- [NgRx SignalStore](https://ngrx.io/guide/signals)
634- [RxAngular](https://www.rx-angular.io/)
635