Computed Signals
Derive values that update automatically.
Computed Signals is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What is a Computed Signal
A computed() signal derives a value from one or more other signals. Whenever a source signal changes, the computed value is recalculated lazily — only when something reads it.
Computed signals are read-only: you cannot call .set() on them.
Creating a computed
You pass a function to computed(). Angular automatically tracks every signal you read inside it.
import { signal, computed } from '@angular/core';
const price = signal(100);
const quantity = signal(2);
const total = computed(() => price() * quantity());
console.log(total()); // 200Automatic dependency tracking
You never declare dependencies manually. Reading price() and quantity() inside the callback registers them as dependencies automatically.
If a signal is read conditionally and not reached, it is not tracked on that run.
const showTax = signal(false);
const tax = signal(20);
const base = signal(100);
const final = computed(() =>
showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependencyLaziness and memoization
A computed runs only when read, and caches its result. If you read it twice without source changes, the function runs once.
const a = signal(1);
const doubled = computed(() => {
console.log('recompute');
return a() * 2;
});
doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no logChaining computed signals
Computed signals can depend on other computed signals, forming a reactive graph.
const firstName = signal('Ada');
const lastName = signal('Lovelace');
const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());
console.log(greeting()); // Hello, Ada LovelaceUsing computed in a component
Computed signals shine in components. The template re-renders only when the computed value actually changes.
import { Component, signal, computed } from '@angular/core';
@Component({
selector: 'app-cart',
template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
items = signal([10, 20, 30]);
total = computed(() => this.items().reduce((a, b) => a + b, 0));
}Computed are read-only
Trying to set a computed signal is a compile-time error. They exist purely to express derived state.
const count = signal(0);
const doubled = computed(() => count() * 2);
// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5); // OK - update the source instead
console.log(doubled()); // 10Equality and skipped recomputes
By default a computed uses Object.is to compare. If the new computed value equals the old one, dependents are not notified, avoiding wasted work.
const value = signal(2);
const isEven = computed(() => value() % 2 === 0);
// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changesCustom equality function
You can pass an equal option to control when a computed is considered changed — useful for objects or arrays.
const data = signal({ id: 1, name: 'A' });
const view = computed(
() => data(),
{ equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changesAvoid side effects in computed
A computed must be pure: no HTTP calls, no logging-as-behavior, no mutating other signals. Side effects belong in effect(). Keeping computed pure makes the reactive graph predictable.
Computed vs methods
A template method runs on every change detection cycle. A computed runs only when its dependencies change and caches the result — far more efficient for derived values.
// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }
// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));Quick Check
Test your understanding of computed signals.
Recap: Computed Signals
You learned that computed() creates read-only derived signals with automatic dependency tracking, lazy evaluation, and memoization.
- Keep them pure — no side effects.
- They can depend on other computed signals.
- Use
equalfor custom change detection.
Next: running side effects with effect().
Frequently asked questions
Is the “Computed Signals” lesson free?
Yes — the full text of “Computed Signals” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Computed Signals”?
Derive values that update automatically. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Computed Signals” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.