Recommended Free Tools
Angular signals are reactive values that let Angular track where state is read and update relevant parts of the interface when that state changes. Start with signal() for writable source state, use computed() for derived values, reach for linkedSignal() when a derived value must also be editable, and reserve effect() for synchronizing with imperative systems such as browser storage or third-party APIs.
What Angular signals do
Angular describes Signals as a system that tracks how and where application state is used so the framework can optimize rendering updates. A signal wraps a value; reading it with a function call both returns the value and registers a dependency for the current reactive context.
For example, reading count() inside a template, computed value, or effect is different from reading an ordinary property: Angular can track that use and respond when the signal changes. In an OnPush component template, reading a signal marks the component for update when that signal changes. Signals do not eliminate change detection or guarantee that every application will become faster; their benefit depends on how state is modeled and used. Angular Signals overview
Start with writable state
Create a writable signal with signal(initialValue). Read it by calling it, and change it using .set(value) or .update(fn).
#1 Best Overall
import { computed, signal } from '@angular/core';
const count = signal(0);
const doubled = computed(() => count() * 2);
count.set(3); // count() is now 3
count.update(value => value + 1); // count() is now 4set() replaces the value directly; update() receives the current value and returns its replacement. For objects and arrays, prefer immutable replacement so changes are explicit:
const tasks = signal([{ title: 'Read docs', done: false }]);
tasks.update(items => items.map(task =>
task.title === 'Read docs' ? { ...task, done: true } : task
));A read-only signal prevents callers from using signal write methods, but it does not freeze an object held inside it. Mutating a nested object directly can therefore bypass the intended signal update pattern. Angular Signals overview
Derive values with computed()
Use computed() when a value can be calculated from other signals. Computed signals are read-only, evaluated lazily, and memoized: Angular calculates the value when it is first needed and reuses it until a tracked dependency changes.
const price = signal(12);
const quantity = signal(2);
const total = computed(() => price() * quantity());
console.log(total()); // 24Dependencies are dynamic. Angular tracks the signals read during the latest computation, not every signal that might ever be read. A conditional computed value can therefore gain or lose dependencies as its selected branch changes:
const showDetails = signal(false);
const details = signal('Ready');
const summary = computed(() =>
showDetails() ? details() : 'Details hidden'
);While showDetails() is false, changes to details are not needed to determine summary. If the condition later becomes true, the next evaluation reads and tracks details().
Choose between computed(), linkedSignal(), and effect()
These APIs solve different problems. The useful distinction is whether a value is derived, manually adjustable, or used to synchronize something outside the signal graph.
| Need | Use | What it means |
|---|---|---|
| Writable source state | signal() |
Application code can read and update the value with signal methods. |
| Read-only derived state | computed() |
Angular calculates a value from the signals read by its computation. |
| Derived state that users or code may also adjust | linkedSignal() |
The value follows other state but remains manually writable. |
| Synchronization with a non-signal system | effect() |
Runs work such as logging, storage updates, or calls into imperative APIs when tracked signals change. |
Use linkedSignal() for dependent but editable state
Choose linkedSignal() when a value has a source or default derived from other state but also needs to be changed independently. It is useful where computed() would be too restrictive because the result must be writable. Angular’s effects guidance recommends computed() for derived values and linkedSignal() for values that are both derived and manually set. Angular effects guide
Keep effect() for external synchronization
An effect is appropriate when a signal change must synchronize with a system that does not itself use signals—for example, writing to browser storage, logging, custom DOM work, or updating a third-party rendering library. Effects track signal reads dynamically.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteRank #3
Do not use an effect as the default way to copy one signal into another or propagate derived state. That can cause ExpressionChangedAfterItHasBeenChecked errors, circular updates, and unnecessary change-detection cycles. Angular’s tutorial puts the decision plainly: if an effect copies one signal to another, reconsider where the source of truth belongs and use computed() or linkedSignal() instead. Angular tutorial: Reacting to signal changes with effects
Understand effect timing, context, and cleanup
Effects run asynchronously as part of Angular’s change-detection process, and signal reads inside the effect determine which changes trigger it. Effects created in a component, directive, or service are tied to that enclosing context and are cleaned up with it by default. Creating one outside an injection context requires supplying an injector. Angular effects guide
When an effect starts work that should stop before the next run or when the effect is destroyed, register cleanup. This is important for timers, event listeners, or other work that would otherwise keep running:
effect((onCleanup) => {
const currentId = selectedId();
const timer = setTimeout(() => logSelection(currentId), 500);
onCleanup(() => clearTimeout(timer));
});The example illustrates cleanup structure; use effects for this kind of imperative synchronization rather than to maintain a second copy of signal state. For DOM work that specifically needs Angular’s updated render to be committed first, the effects guide describes afterRenderEffect(), which runs after Angular finishes rendering and commits changes. Angular effects guide
Load asynchronous data with resource APIs
Use resource() when a reactive input drives asynchronous work. Its reactive params and async loader provide signal-readable data and status, giving a UI the information needed to represent loading, success, and failure. Angular resources guide
For example, a selected user ID can be a reactive parameter for a loader. The resource’s status can drive a loading indicator or error message, while its value supplies the loaded result. Treat resources as asynchronous state, not as a replacement for ordinary synchronous derivation with computed().
Angular warns that resource data serialized for server-side rendering should not be user-specific if the rendered HTML may be cached or shared. Otherwise, one user’s data could be exposed through a shared response. Angular resources guide
Use httpResource() for HttpClient-backed requests
httpResource() is the HTTP-oriented option when a request should use Angular’s HttpClient stack. It exposes response and status as signals and supports HttpClient features such as interceptors. Choose it for reactive HTTP requests; use resource() for general asynchronous loaders that are not specifically HttpClient requests. Angular httpResource guide
Use signals in component inputs and two-way bindings
For new component APIs, Angular recommends signal-based input(). It returns a read-only signal representing a value supplied to the component. The component can react to that value, but cannot write to the input signal itself. Decorator-based @Input remains supported. Angular inputs guide
Use model() when a component should be able to write the value and propagate it back to a parent through two-way binding. The distinction is practical: an input is parent-provided, read-only component state; a model is a value the component and parent can both update through the binding contract. Angular inputs guide
What signal stability means for Angular versions
Angular’s v20 roadmap records that the fundamental reactivity primitives—including signal, effect, linkedSignal, signal-based queries, and inputs—graduated to stable in Angular v20, with the milestone marked completed in Q2 2025. That is a specific v20 stability milestone; it does not establish which Angular release is latest in October 2026. Angular v20 roadmap
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
