Angular Signals (signal, computed, effect)
Give a real production-style example of using Angular Signals (signal, computed, effect). Walk through the scenario end-to-end.
Answers use simple, clear English.
Quick interview answer
Scenario: cartCount = computed(() => items().reduce(...)); template reads cartCount(). Implementation notes: Prefer signals for local UI state; RxJS for async streams still fine.
Detailed answer
Scenario: cartCount = computed(() => items().reduce(...)); template reads cartCount(). Implementation notes: Prefer signals for local UI state; RxJS for async streams still fine. Core: Signals are reactive primitives: signal() writable, computed() derived, effect() side effects. Fine-grained updates reduce reliance on Zone.js change detection for many cases. Real-time example: cartCount = computed(() => items().reduce(...)); template reads cartCount(). Pros: Predictable reactivity; better performance mental model. Cons: Migration from RxJS-heavy patterns takes learning. Common mistakes: Writing to signals inside computed; infinite effect loops. Best practices: Prefer signals for local UI state; RxJS for async streams still fine. Audience level: Senior.
Full explanation
Signals are reactive primitives: signal() writable, computed() derived, effect() side effects. Fine-grained updates reduce reliance on Zone.js change detection for many cases.
Real example & use case
cartCount = computed(() => items().reduce(...)); template reads cartCount().
Pros & cons
Pros: Predictable reactivity; better performance mental model. Cons: Migration from RxJS-heavy patterns takes learning.
Common mistakes
Writing to signals inside computed; infinite effect loops.
Best practices
Prefer signals for local UI state; RxJS for async streams still fine.
Follow-up questions
- How would you test Angular Signals (signal, computed, effect)?
- What metrics prove Angular Signals (signal, computed, effect) is healthy in prod?
- How does Angular Signals (signal, computed, effect) change at 10× traffic?