Angular Academy · Lesson

Creating a SignalStore

Define state with signalStore and withState.

Creating a SignalStore is a free Angular Academy lesson on CoddyKit — lesson 1 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.

What Is SignalStore

NgRx SignalStore is a lightweight state management solution built on Angular signals. You compose a store from features like withState, withComputed, and withMethods.

Installing

SignalStore lives in the @ngrx/signals package. Add it to your Angular project, then import the building blocks you need.

// terminal
// ng add @ngrx/signals
import { signalStore, withState } from '@ngrx/signals';

signalStore Factory

signalStore() returns an injectable class. Pass features describing the state and behavior. By default the store is provided in root.

export const CounterStore = signalStore(
  { providedIn: 'root' },
  withState({ count: 0 })
);

withState

withState(initial) defines the initial state. Each top-level property becomes a signal on the store, so store.count is a signal you call as store.count().

withState({
  count: 0,
  user: null as User | null,
  items: [] as Item[]
});

Injecting the Store

Because the factory returns an injectable class, you inject it like any service and read its state signals in templates.

@Component({
  template: '<p>{{ store.count() }}</p>'
})
export class CounterComponent {
  store = inject(CounterStore);
}

patchState

Update SignalStore state with the patchState helper. It accepts the store plus partial state objects or updater functions and applies them immutably.

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

patchState(store, { count: 5 });
patchState(store, (s) => ({ count: s.count + 1 }));

State Slices As Signals

Every state key is exposed as an individual signal. Reading one slice does not couple you to others, and templates update only for the slices they read.

// given withState({ count: 0, name: '' })
store.count();  // number signal
store.name();   // string signal

Typing State

Type your state explicitly for nullable or array fields so SignalStore infers correct signal types. Use as casts in the initial object.

type State = { user: User | null; loading: boolean };

withState<State>({ user: null, loading: false });

Local vs Root Provided

Omit providedIn to make a component-scoped store; add the store to the component's providers. This gives each component instance its own isolated state.

@Component({
  providers: [CounterStore]
})
export class WidgetComponent {
  store = inject(CounterStore);
}

Composing Features

The power of SignalStore is composition: list multiple features and they merge into one store. Order matters because later features can read earlier ones.

export const TodoStore = signalStore(
  withState({ todos: [] as Todo[] })
  // withComputed(...), withMethods(...) added next
);

No Boilerplate

Unlike the classic Redux-style NgRx (actions, reducers, effects, selectors), SignalStore co-locates state and logic in one declarative store with far less boilerplate.

Quick Check

Check your SignalStore basics.

Recap

You created a SignalStore with signalStore() and withState, read state slices as signals, updated them immutably via patchState, and chose between root-provided and component-scoped stores. Next: computed and methods.

Frequently asked questions

Is the “Creating a SignalStore” lesson free?

Yes — the full text of “Creating a SignalStore” 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 “Creating a SignalStore”?

Define state with signalStore and withState. 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 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Creating a SignalStore” 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