Angular Academy · Lesson

Deriving State with computed

Build read models from base state.

Lesson 2 of 413 steps

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

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.

Answer it in the interactive lesson

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.

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 “Deriving State with computed” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Deriving State with computed”, 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 “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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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