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();
},
}),
);
Skills similaires
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Claude CodeCursoradvanced
890
234
3,180
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
claudeCursorWindsurfbeginner
259
72
1,083
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.
claudeCursorWindsurfintermediate
156
44
943