hardFrontend

What are the differences between State Management libraries in Angular?

41 views
01

Understand the problem

Compare NgRx, Akita, Elf, and Signals-based state management.

state-managementarchitecture
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

03

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

04

Read the code

A clean, modern state store using Signals
import { Injectable, signal, computed } from '@angular/core';

export interface Todo { id: number; text: string; done: boolean; }

@Injectable({ providedIn: 'root' })
export class TodoStore {
  private state = signal<{ todos: Todo[]; filter: string }>({
    todos: [],
    filter: 'all'
  });

  todos = computed(() => this.state().todos);
  activeTodos = computed(() => this.state().todos.filter(t => !t.done));

  addTodo(text: string) {
    this.state.update(curr => ({
      ...curr,
      todos: [...curr.todos, { id: Date.now(), text, done: false }]
    }));
  }
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.