Angular Academy · Lesson

Computed and Methods

Add derived state and update methods.

Lesson 2 of 413 steps

Computed and Methods 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.

Beyond Raw State

A useful store exposes derived values and behavior. SignalStore adds these with withComputed for read models and withMethods for actions.

withComputed

withComputed receives the store's current signals and returns an object of computed() signals. They memoize and auto-update like any computed.

import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';

export const CartStore = signalStore(
  withState({ items: [] as Item[] }),
  withComputed(({ items }) => ({
    count: computed(() => items().length),
    total: computed(() => items().reduce((s, i) => s + i.price, 0))
  }))
);

Reading Computed

Computed members appear on the store just like state. Read store.count() and store.total() in templates; they update when items changes.

template: 'Items: {{ store.count() }} — {{ store.total() }}'

withMethods

withMethods receives the store and returns named methods. Inside, use patchState to update state immutably.

import { withMethods, patchState } from '@ngrx/signals';

withMethods((store) => ({
  add(item: Item) {
    patchState(store, (s) => ({ items: [...s.items, item] }));
  },
  clear() {
    patchState(store, { items: [] });
  }
}))

Methods Read State Too

Inside a method you can read current signals from the store argument to make decisions before patching.

withMethods((store) => ({
  toggle(id: string) {
    const exists = store.items().some(i => i.id === id);
    if (!exists) return;
    patchState(store, (s) => ({
      items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
    }));
  }
}))

Methods Can Use computed

Because withComputed runs before withMethods, methods can read computed members the store already exposes.

withMethods((store) => ({
  checkout() {
    if (store.total() === 0) return;
    // proceed...
  }
}))

Injecting Dependencies

withMethods runs in an injection context, so call inject() inside to grab services like HttpClient or a router.

withMethods((store, http = inject(HttpClient)) => ({
  load() {
    http.get<Item[]>('/api/items')
      .subscribe(items => patchState(store, { items }));
  }
}))

Ordering Of Features

Features compose top to bottom. Put withState first, then withComputed (reads state), then withMethods (reads state and computed). Reversing causes type errors.

Encapsulation

Components call store.add(item) or read store.total(). They never call patchState directly, keeping all mutation logic inside the store.

Pure Computed, Effectful Methods

Keep withComputed functions pure (derive only). Put side effects such as HTTP calls or navigation inside withMethods.

Testing Methods

SignalStores are injectable classes. In tests, provide the store via TestBed, call a method, then assert on the state and computed signals synchronously.

const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);

Quick Check

Check your understanding of computed and methods.

Answer it in the interactive lesson

Recap

You enriched a SignalStore with withComputed for memoized read models and withMethods for encapsulated actions that use patchState and injected services. Feature order ensures each layer can read the ones before it.

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 and Methods” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Computed and Methods”, 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 and Methods”?

Add derived state and update methods. 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 “Computed and Methods” 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