Recommended Free Tools
Angular Signals are reactive values: read a signal by calling it, and Angular tracks that read so it can update the parts of an application that depend on the value. Use signal() for writable state, computed() for derived state, and effect() only when a change must synchronize with an imperative system outside the signal graph.
What are Angular Signals?
Signals are values wrapped in a callable API. A signal getter returns the current value; when that getter runs in a reactive context, Angular records the dependency. Angular describes Signals as “a system that granularly tracks how and where your state is used throughout an application, allowing the framework to optimize rendering updates.” Angular Signals • Overview.
As an Amazon Associate I earn from qualifying purchases.
This tracking connects state to the places that consume it. When a tracked value changes, Angular can notify interested consumers rather than treating every read as an untracked access. Signals are a state and reactivity model within Angular, not a replacement for change detection.
Free tools Windows power users keep installed
One-click scans. No signup required.
How do signals work in Angular?
Reading creates dependencies
Call a signal to read it. For example, count() returns the current value of count. In a computed derivation, an effect, or a component template, that read tells Angular which signal the consumer depends on.
#1 Best Overall
Dependencies are dynamic
Angular tracks the signals actually read when a reactive function runs. If a computed value reads count only when a condition is true, count is a dependency only on executions that take that branch. As the function runs again, Angular can add or remove dependencies according to the path taken.
Signal reads in OnPush templates
When an OnPush component template reads a signal, Angular tracks that component as a consumer. If the signal changes, Angular marks the component for an update on the next change-detection run. This makes signal reads useful in templates without implying that change detection has disappeared.
Which Angular signal API should you use?
| API | Use it for | Can the consumer write? | How it behaves |
|---|---|---|---|
signal() |
Locally managed state | Yes | Change its value with .set() or .update(); consumers are notified when it changes. Angular Signals • Overview |
computed() |
Derived state | No | Calculates from signals read by its function; evaluation is lazy and the result is memoized. Angular Signals • Overview |
linkedSignal() |
Dependent state that remains writable | Yes | Recalculates in relation to a source and can use a prior value when deciding the next value. Angular Linked Signals |
input() |
Data provided to a component by its parent | No | Exposes an incoming value as a read-only signal, usable in reactive contexts. Angular Component Inputs |
model() |
A component value that can be changed by the component and its parent | Yes | Creates a corresponding output and supports two-way binding. Angular Component Inputs |
resource() |
Asynchronous results such as server data | Managed through the resource API | Reactive parameters trigger an asynchronous loader; result and status are signal-accessible. Angular Resources |
effect() |
Synchronizing with imperative APIs | Not a state-derivation API | Tracks reads dynamically and runs asynchronously during change detection. Use it at boundaries such as logging, storage, custom DOM work, or third-party rendering. Angular Side effects for non-reactive APIs |
What is the difference between signal() and computed()?
signal() is for state whose value is set or updated by application logic. computed() is for a value determined by other signals. A computed value is read-only; change its source signals rather than trying to assign to the computed result.
import { computed, signal } from '@angular/core';
const count = signal(0);
const doubleCount = computed(() => count() * 2);
count.set(3); // count is now 3
count.update(value => value + 1); // count is now 4
console.log(doubleCount()); // 8The computed function runs when its value is read and Angular needs to evaluate it; Angular memoizes the result until a dependency changes. It is not an eagerly maintained duplicate that recalculates on every source update whether or not anyone reads it.
Rank #3
When should you use linkedSignal()?
Use linkedSignal() when a value is related to another signal but must still be writable. A plain computed value is appropriate when the result should always be determined solely by its sources. A linked signal is useful when the relationship needs a default or reset rule while allowing the current value to be changed.
For example, suppose a form lets someone choose a shipping option from a signal-backed list. If the list changes and the selected option is no longer available, linked state can select a valid option. Its computation can also preserve the previous selection when that option remains in the new list. That combination of dependency and writable selection is different from a read-only computed result. Angular Linked Signals.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When should you use effect() in Angular?
Use an effect when a signal change must trigger an imperative action in a non-signal system—for example, writing to storage, logging, manipulating the DOM for a specialized integration, or notifying a third-party rendering library. Effects track the signals they read and run asynchronously during change detection.
Do not use an effect merely to copy one signal into another. For ordinary derivation, use computed(); for dependent state that remains writable, use linkedSignal(). Copying state through effects can introduce cycles, extra change detection, or errors. Angular’s documentation, Side effects for non-reactive APIs, puts it plainly: “Effects should be the last API you reach for.” Angular Side effects for non-reactive APIs.
How do input() and model() fit into component state?
Use input() for parent-owned values
input() exposes a component input as a read-only signal. The parent supplies the value; the component can read it reactively but does not own the authority to write it back through that input. This is a good fit for data that flows into a component. Angular Component Inputs.
Use model() for values that flow both ways
model() is for a component value that can be updated by the component and propagated back to its parent. It creates a corresponding output and supports two-way binding. Choose it when that two-way ownership is part of the component contract, not simply because the component needs to read an input. Angular Component Inputs.
How do signals handle asynchronous work?
Core signal APIs represent synchronous state. Angular’s resource() API connects asynchronous loading to reactive parameters: its parameter computation tracks signal reads, and a change in those parameters causes the loader to run. The resource exposes its result and status through signal-accessible state. Angular Resources.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Resources provide a signal-oriented way to model asynchronous results; they are not a rule that every network request in every Angular application must use this API. Pick an async approach that fits the surrounding application and the behavior you need.
How can you learn the APIs in context?
Angular’s interactive Signals tutorial is aimed at developers who already know basic Angular concepts. It provides a practical next step after understanding how reads, dependencies, and updates fit together. Angular Signals Tutorial.
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.
