iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular Signals are tracked values: read a signal by calling it, and Angular records which parts of your app depend on it. When the value changes, Angular can notify those consumers and update the relevant view. Use signal() for writable state, computed() for derived state, and reserve effect() for synchronizing with systems outside Angular’s signal graph.
What are Angular Signals?
Signals are Angular’s reactive state model. A signal wraps a value and exposes it through a getter function. Calling that function reads the current value and, when the read occurs in a tracked context, lets Angular register 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).
This tracking helps Angular know which consumers may need to respond when state changes. Signals do not remove change detection; they give Angular more precise information about state use and changes.
How do signals work in Angular?
Create writable state with signal(), then call the signal to read its value. To change it, use .set() to provide a new value or .update() to calculate a new value from the current one:
#1 Best Overall
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
// doubleCount() is now 8count() reads the current value. doubleCount() reads a value derived from count; Angular evaluates computed signals lazily and memoizes the result until a dependency changes. It is not an eagerly maintained duplicate of the source value.
Dependencies follow the reads that actually happen
Angular tracks dependencies dynamically. If a computed function reads count only when a condition is true, count is a dependency only on runs that take that branch. As the function runs again, Angular can add or remove dependencies to match the reads made on that execution.
Signals in OnPush component templates
When an OnPush component template reads a signal, Angular tracks that signal as a dependency of the component. If the signal changes, Angular marks the component for an update on the next change-detection run. This is targeted notification within Angular’s change-detection system, not a replacement for that system.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Which Angular signal API should you use?
| API | Use it for | Can the consumer write it? | Key behavior |
|---|---|---|---|
signal() |
Locally managed state | Yes | Change it with .set() or .update(); consumers are notified when it changes. |
computed() |
Derived state | No | Lazy, memoized derivation from the signals its function reads. |
linkedSignal() |
Writable state that depends on another value | Yes | Recalculates in relation to a source and can account for the previous value. |
input() |
Data supplied to a component by its parent | No | Exposes the incoming value as a signal that can be read in reactive contexts. |
model() |
A component value that can be changed and propagated back | Yes | Creates a corresponding output and supports two-way binding. |
resource() |
Asynchronous results such as server data | Managed through the resource API | Reactive parameters drive an async loader; results and status are signal-accessible. |
effect() |
Synchronizing signal changes with imperative APIs | Not a state-derivation API | Tracks reads dynamically and runs asynchronously during change detection. |
What is the difference between signal() and computed()?
Use signal() when your code owns a value that can change, such as a selected tab or a counter. Use computed() when a value should be calculated from other signals and not independently written. For example, a total price or a filtered list is typically derived state; storing a second writable copy can create synchronization work and inconsistent values.
A computed signal updates conceptually from the signals it reads, but Angular evaluates it only when it is read and its cached result is stale. This lazy, memoized behavior makes it suitable for expressing relationships without manually copying each source update.
When should you use linkedSignal()?
Use linkedSignal() when a value depends on other state but still needs to be writable. A plain computed value is read-only; a separate writable signal may not respond appropriately when its source changes. A linked signal can recalculate in relation to a source and can use the previous value to choose the next value.
Rank #3
For example, imagine a list of shipping options and a selected option. If the available list changes, the previous selection might no longer be valid. A linked signal can select a valid option again, while considering whether the prior selection is still present. This is dependent, user-adjustable state—not merely a calculation—so it is a better fit than a computed value.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →When should you use effect() in Angular?
Use effect() at the boundary between signals and an imperative, non-signal system: for example, writing a value to storage, logging, custom DOM work, or updating a third-party rendering library. An effect tracks the signals it reads and runs asynchronously during change detection when those dependencies change.
Angular’s effects documentation, Side effects for non-reactive APIs, says: “Effects should be the last API you reach for.” Prefer computed() for derived state and linkedSignal() for state that can be derived but also manually set. Avoid using effects to copy values from one signal to another: that can introduce extra change detection, cycles, or errors instead of expressing the relationship directly. See Angular’s effects guide.
How do input() and model() differ?
input() represents a value supplied to a component by its parent. The component reads it as a signal but does not write to it as its own state. This is useful when component behavior should react to incoming data without taking ownership of it.
model() is for a component value that can be changed by the component and propagated back through two-way binding. It creates a corresponding output. Choose it when the component and its parent are meant to participate in updating the same bound value, rather than for every input that is simply read.
Free tools Windows power users keep installed
One-click scans. No signup required.
How do signals work with asynchronous data?
The core signal APIs represent synchronous state. Angular’s resource() API connects reactive parameters to asynchronous work: its parameter computation tracks the signals it reads, and a change to those parameters triggers the loader. The resource exposes results and status in signal-readable form (Angular resource guide).
A resource can be useful when asynchronous work naturally follows reactive parameters, such as loading data for a selected identifier. It is not a requirement to use resources for every network request; choose the approach that fits the application’s existing data flow and the specific operation.
How can you learn the APIs in context?
Angular’s interactive Signals tutorial is intended for developers who already know basic Angular concepts. It provides a guided way to explore the framework’s signal APIs (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.
