Angular course · Module 10: State Management
When to Use State Management?
In this lesson4
Without a Library (Signals/Services)
Use when:
- Small/medium project
- State is mostly local in components
- Simple sharing between a few components
- Team is new to Angular
// Simple service with Signals
@Injectable({ providedIn: 'root' })
export class CartService {
private items = signal<CartItem[]>([]);
readonly cartItems = this.items.asReadonly();
readonly total = computed(() =>
this.items().reduce((sum, item) => sum + item.price, 0)
);
addItem(item: CartItem): void {
this.items.update(items => [...items, item]);
}
}NgRx SignalStore
Use when:
- Medium project with growing complexity
- You want to leverage Signals
- You need structure, but not full Redux
- You prefer a functional approach
Classic NgRx
Use when:
- Large, complex project
- Many data sources and side effects
- You need DevTools for debugging
- Team experienced with Redux/NgRx
Summary
| Solution | Complexity | Boilerplate | DevTools | Signals |
|---|---|---|---|---|
| Services + Signals | Low | Minimal | No | Yes |
| SignalStore | Medium | Small | Yes | Yes |
| NgRx Store | High | Large | Yes | No* |
*NgRx has selectSignal() for integration
// NgRx with Signals
@Component({...})
export class MyComponent {
private store = inject(Store);
// Observable → Signal
samurai = this.store.selectSignal(selectAllSamurai);
loading = this.store.selectSignal(selectLoading);
}Docs entries used in this lesson
Spotted a mistake in this lesson?
Check yourself
Answer the questions from this lesson. Pick an answer to see right away whether it is correct.
1. Which state management solution is recommended for a small project with mostly local state?
2. What is the store.selectSignal(selector) method used for in classic NgRx?
These are 2 of 4 questions for this lesson. Solve the rest in the game.
Hands-on tasks in the game
- Vertical ordering
Order the state management solutions from lowest to highest complexity and boilerplate:
- Click in order
Click the elements in order to build the assignment that turns an NgRx selector into a Signal in a component: