Angular Signals (signal, computed, effect)
Implement or sketch code for Angular Signals (signal, computed, effect). Explain the logic, complexity, and pros/cons of this approach.
Answers use simple, clear English.
Quick interview answer
Logic: Signals are reactive primitives: signal() writable, computed() derived, effect() side effects. Fine-grained updates reduce reliance on Zone.js change detection for many cases.
Detailed answer
Logic: Signals are reactive primitives: signal() writable, computed() derived, effect() side effects. Fine-grained updates reduce reliance on Zone.js change detection for many cases. Complexity notes included in code section when present. Pros: Predictable reactivity; better performance mental model. Cons: Migration from RxJS-heavy patterns takes learning. 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: Engineering Manager.
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.
Code example
import { signal, computed, effect } from '@angular/core';
const price = signal(100);
const qty = signal(2);
const total = computed(() => price() * qty());
effect(() => console.log('total', total()));Practice code · typescript (view only · no execution)
import { signal, computed, effect } from '@angular/core';
const price = signal(100);
const qty = signal(2);
const total = computed(() => price() * qty());
effect(() => console.log('total', total()));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?