Angular Signals basics
Explain Angular Signals (signal, computed, effect). How do they change change-detection thinking?
Answers use simple, clear English.
Quick interview answer
signal() holds reactive state; computed() derives values; effect() runs side effects when dependencies change. Templates read signals with (). Fine-grained updates reduce broad Zone.js checks.
Detailed answer
signal() holds reactive state; computed() derives values; effect() runs side effects when dependencies change. Templates read signals with (). Fine-grained updates reduce broad Zone.js checks. Prefer signals for local UI state; keep RxJS for complex async streams and bridge with toSignal/toObservable.
Real example & use case
Cart qty signals; computed total; effect logs analytics when total changes.
Pros & cons
Pros: clearer reactivity + performance. Cons: migration from only-RxJS patterns.
Code example
import { signal, computed } from '@angular/core';
const price = signal(50);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 150Practice code · typescript (view only · no execution)
import { signal, computed } from '@angular/core';
const price = signal(50);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 150