Angular — State Management

State Management Options

Method	Complexity	Best For
Component	Low	Local state
Service	Medium	Shared state
Signals	Medium	Reactive state
NgRx	High	Complex apps

Service Pattern

@Injectable({ providedIn: 'root' })
export class TodoService {
  private todos = new BehaviorSubject<Todo[]>([]);
  todos$ = this.todos.asObservable();
  
  addTodo(text: string) {
    const current = this.todos.value;
    this.todos.next([...current, { id: Date.now(), text, completed: false }]);
  }
  
  toggleTodo(id: number) {
    const current = this.todos.value;
    this.todos.next(current.map(t => 
      t.id === id ? { ...t, completed: !t.completed } : t
    ));
  }
}

Signal Store (NgRx)

import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';

export const TodoStore = signalStore(
  withState({ todos: [] as Todo[] }),
  withMethods((store) => ({
    addTodo(text: string) {
      patchState(store, {
        todos: [...store.todos(), { id: Date.now(), text, completed: false }]
      });
    },
    toggleTodo(id: number) {
      patchState(store, {
        todos: store.todos().map(t => 
          t.id === id ? { ...t, completed: !t.completed } : t
        )
      });
    }
  }))
);

Mini Practice

1. Create a state service
2. Use BehaviorSubject
3. Create a signal store
4. Compare patterns

Up Next

Continue with SSR — server-side rendering.