Angular Academy · Lesson

Computed Signals

Derive values that update automatically.

Lesson 1 of 413 steps

Computed Signals is a free Angular Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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()); // 200

Automatic 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 dependency

Laziness 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 log

Chaining 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 Lovelace

Using 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()); // 10

Equality 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 changes

Custom 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 changes

Avoid 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.

Answer it in the interactive lesson

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 equal for custom change detection.

Next: running side effects with effect().

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Computed Signals” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Computed Signals”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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.

All lessons in this course

← Back to Angular Academy