name: create-signal-store description: Use when the user asks to add state management or create a store for a feature in this Angular workspace.
Creating a Signal Store
In this workspace we manage state exclusively with the NgRx Signal Store. When asked to create a store, follow these rules:
- Create the store with
signalStorefrom@ngrx/signals. - Decide
providedIn: 'root'vs. component-provided scope using the placement test in thestate-managementskill — don't default to root. - Keep collections with
withEntities<T>(); keep flags and scalar values withwithState({ ... }). - Implement every asynchronous action as an
rxMethodand wrap the HTTP call intapResponse. Track loading with aloadingflag kept inwithState({ loading: false }): set it totruebefore the call in a leadingtap, and back tofalsewhen the data arrives. - On success, patch the state AND show a success notification through the
injected
NotificationService. On error, show an error notification. - Inject services through default parameters of the
withMethodsfactory. - If the store should load its data immediately, call the load method from
a
withHooks({ onInit })hook.
Example
export const DogsStore = signalStore(
{ providedIn: 'root' },
withEntities<Dog>(),
withState({ loading: false }),
withMethods(
(
store,
notificationService = inject(NotificationService),
dogsApiService = inject(DogsApiService),
) => ({
loadDogs: rxMethod<void>(
pipe(
tap(() => patchState(store, { loading: true })),
exhaustMap(() =>
dogsApiService.getDogs().pipe(
tapResponse({
next: (dogs) => {
patchState(store, setAllEntities(dogs), { loading: false });
notificationService.showSuccess('Dogs Loaded');
},
error: () => notificationService.showError(),
}),
),
),
),
),
}),
),
withHooks({
onInit(store) {
store.loadDogs();
},
}),
);
Related skills
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
Claude CodeCursoradvanced
890
234
3,180
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
claudeCursorWindsurfbeginner
259
72
1,083
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.
claudeCursorWindsurfintermediate
156
44
943