Understand Angular 17+ signals, computed(), effect(), toSignal(), and how signals enable fine-grained change detection.
0 / 5 completed
1 / 5
What is an Angular signal and how do you create one?
signal(): introduced in Angular 17, signals are Angular's built-in reactivity primitive. const count = signal(0) creates a signal. Reading its value calls it as a function: count(). Updating uses count.set(1) or count.update(v => v + 1).
2 / 5
What does computed() do in Angular signals?
computed():const doubled = computed(() => count() * 2) derives a new signal. Angular tracks which signals are read inside the function and only re-evaluates doubled when those dependencies change. The result is cached between changes.
3 / 5
What is the purpose of effect() in Angular signals?
effect(): use it for side effects like logging, syncing to localStorage, or interacting with third-party libraries. Angular automatically tracks signal reads inside the effect callback and re-runs it when those signals update. Avoid writing to signals inside an effect to prevent infinite loops.
4 / 5
What does toSignal() from @angular/core/rxjs-interop do?
toSignal(): bridges the RxJS and signal worlds. const user = toSignal(user$) subscribes to the observable and returns a signal that always holds the latest value. The subscription is automatically cleaned up when the injection context is destroyed.
5 / 5
How does signal-based change detection differ from Angular's traditional zone-based approach?
Signal-based change detection: with Zone.js, Angular patches async APIs and runs change detection on the whole tree. With signals, Angular knows exactly which template expressions depend on which signals. Only affected component views are marked dirty and re-rendered, reducing unnecessary work.