Angular Academy · Lesson

Deriving State with computed

Build read models from base state.

Deriving State with computed is a free Angular Academy lesson on CoddyKit — lesson 2 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.

Derived State

Often state is computed from other state: a total from items, a filtered list, a validity flag. Angular's computed() creates a read-only signal whose value is derived from other signals.

Creating a computed

Pass a function to computed(). It reads other signals and returns a value. The result re-evaluates only when one of its dependencies changes.

import { signal, computed } from '@angular/core';

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

Automatic Dependency Tracking

You never declare dependencies. Whatever signals you read inside the function become dependencies automatically. Change qty and total recomputes; change an unrelated signal and it does not.

Memoization

computed() caches its result. Reading it many times runs the function once until a dependency changes. This makes derived read models cheap even when accessed in many template bindings.

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

Computed in a Store

Inside a signal store, expose computed read models so components consume ready-to-render values instead of recomputing in templates.

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

Chaining computed

Computed signals can read other computed signals. Build layered read models: a base derivation feeds a higher-level one.

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

Filtering and Searching

A common read model: filter a list by a search signal. The filtered result updates whenever the list or the query changes.

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

No Side Effects

A computed() function must be pure: it only reads signals and returns a value. Do not mutate state, call APIs, or write to other signals inside it. For side effects use effect() instead.

Equality and Skipping Updates

By default computed uses referential equality (Object.is) to decide if the value changed. If the new value equals the old, consumers are not notified, avoiding unnecessary work.

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

Using computed in Templates

Read computed signals in templates like any signal. Angular updates only the bindings whose computed value actually changed.

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

Computed vs Methods

Use computed() for values derived from state that should auto-update and memoize. Use a plain method for one-off calculations that take arguments or should run on demand.

Quick Check

Check your understanding of computed signals.

Recap

You built derived state with computed(): automatic dependency tracking, memoized pure functions, chainable read models, and skipped updates via equality. Expose computed read models from stores so templates stay declarative.

Frequently asked questions

Is the “Deriving State with computed” lesson free?

Yes — the full text of “Deriving State with computed” 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 “Deriving State with computed”?

Build read models from base state. 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 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Deriving State with computed” 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