Angular SignalStore sample

Playground sample for using SignalStore in Angular project.
Project is just an exercise tracking app for gym.

Click here to see store

How store is defined in src/app/features/repetitions/store.ts:

type RepetitionsTrackingState = {
  repetitions: RepetitionDto[];
  set: number,
  reps: number,
  isLoading: boolean;
  filter: { query: string; order: 'asc' | 'desc' };
};
//...
export const RepetitionsTrackingStore = signalStore(
  { providedIn: 'root' },
  withDevtools('repetitions'),
  withState(() => inject(REPETITIONS_TRACKING_STATE)),
  withMethods((store, repetitionsApiService = inject(RepetitionsApiService)) => ({
    async loadAll(): Promise<void> {
      patchState(store, { isLoading: true });
      const repetitions = await repetitionsApiService.fetchRepetitions();
      patchState(store, { repetitions, isLoading: false });
    },
    async editSet(set: number) {
      patchState(store, () => ({ set }));
    },
    async editReps(reps: number) {
      patchState(store, () => ({ reps }));
    },
    async addRepetition(): Promise<void> {
      const { set, reps } = store;
      const repetition: RepetitionDto = { created_at: Date.now(), exercise_id: 2, sets: set(), repetitions: reps() };
      await repetitionsApiService.saveRepetition(repetition);
      patchState(store, ({ repetitions }) => ({
        repetitions: [...repetitions, repetition],
        set: 0,
        reps: 0
      }));
    },
  }))
);

Requirements

• NodeJS: 22+
• Angular CLI: 20+

Development server

To start a local development server, run:

npm start

License

• GNU AGPL Version 3

About the author

Matija Čvrk, Software Engineer and enthusiast

Connect: LinkedIn