Angular Academy · Lesson

Computed and Methods

Add derived state and update methods.

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

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.

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.

Frequently asked questions

Is the “Computed and Methods” lesson free?

Yes — the full text of “Computed and Methods” 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 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; 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 “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