NgRx SignalStore: The Power of Extensibility

NgRx is the undisputed standard for State Management in the Angular ecosystem. With the SignalStore, we have the latest evolution: fully optimized for Signals and officially recommended by the Angular Team.

But for me, the main selling point of the SignalStore is not just that it manages state. It is its Extensibility.

In this talk, I will give a short introduction to the SignalStore before shifting focus to its "crown jewels": Extensions. We will explore what they are, how they work under the hood, and why this modular architecture makes the SignalStore a powerful tool that belongs in every modern Angular application.

Transcript

1. NgRx SignalStore The Power of Extensibility Rainer Hahnekamp Ng-India 2026
2. NgRx SignalStore The Power to Scale
3. NgRx Team Alex Okrushko Marko Staminirović Brandon Roberts Tim Deschryver Mike Ryan Rainer Hahnekamp
4. Agenda 1. The NgRx Project 2. The Basics 3. Extensibility
5. Some Facts NgRx in every 5th Angular app
6. Some Facts NgRx in every 5th Angular app SignalStore - unified unified successor of @ngrx/store & @ngrx/component-store
7. Some Facts NgRx in every 5th Angular app SignalStore - unified unified successor of @ngrx/store & @ngrx/component-store Close collaboration with the Angular team
8. A Comparison: State & Slices @Injectable({ providedIn: 'root' }) export class HolidaysStore { // State readonly #state = signal<HolidayState>({ holidays: [], favouriteIds: [], filter: { query: '', type: 0 }, }); // Slices holidays = computed(() => this.#state().holidays); favouriteIds = computed(() => this.#state().favouriteIds); filter = computed(() => this.#state().filter); }
9. A Comparison: State & Slices @Injectable({ providedIn: 'root' }) export class HolidaysStore { // State readonly #state = signal<HolidayState>({ holidays: [], favouriteIds: [], filter: { query: '', type: 0 }, }); // Slices holidays = computed(() => this.#state().holidays); favouriteIds = computed(() => this.#state().favouriteIds); filter = computed(() => this.#state().filter); } export const HolidayStore = signalStore( { providedIn: 'root' }, withState<HolidayState>({ holidays: [], favouriteIds: [] , filter: { query: '', type: 0 }, }) );
10. A Comparison: State & Slices @Injectable({ providedIn: 'root' }) export class HolidaysStore { // State readonly #state = signal<HolidayState>({ holidays: [], favouriteIds: [], filter: { query: '', type: 0 }, }); // Slices holidays = computed(() => this.#state().holidays); favouriteIds = computed(() => this.#state().favouriteIds); filter = computed(() => this.#state().filter); } export const HolidayStore = signalStore( { providedIn: 'root' }, withState<HolidayState>({ holidays: [], favouriteIds: [] , filter: { query: '', type: 0 }, }) );
11. A Comparison: Computeds export class HolidaysStore { // State... // Computeds holidaysCount = computed(() => this.#state().holidays.length); }
12. A Comparison: Computeds export class HolidaysStore { // State... // Computeds holidaysCount = computed(() => this.#state().holidays.length); } export const HolidayStore = signalStore( // withState()... withComputed(({ holidays }) => ({ holidaysCount: () => holidays().length, })), );
13. A Comparison: Methods export class HolidaysStore { // State, Computeds... // Methods readonly #httpClient = inject(HttpClient); async load() { const holidays = await lastValueFrom( this.#httpClient.get<Holiday[]>('/holiday') ); this.#state.update((state) => ({ ...state, holidays })); } }
14. A Comparison: Methods export class HolidaysStore { // State, Computeds... // Methods readonly #httpClient = inject(HttpClient); async load() { const holidays = await lastValueFrom( this.#httpClient.get<Holiday[]>('/holiday') ); this.#state.update((state) => ({ ...state, holidays })); } } export const HolidayStore = signalStore( // withState, withComputed,... withMethods((store, http = inject(HttpClient)) => ({ async load() { const holidays = await lastValueFrom( http.get<Holiday[]>('/holiday') ); patchState(store, { holidays }); }, })) );
15. A Comparison: Methods export class HolidaysStore { // State, Computeds... // Methods readonly #httpClient = inject(HttpClient); async load() { const holidays = await lastValueFrom( this.#httpClient.get<Holiday[]>('/holiday') ); this.#state.update((state) => ({ ...state, holidays })); } } export const HolidayStore = signalStore( // withState, withComputed,... withMethods((store, http = inject(HttpClient)) => ({ async load() { const holidays = await lastValueFrom( http.get<Holiday[]>('/holiday') ); patchState(store, { holidays }); }, })) );
16. A Comparison: Methods export class HolidaysStore { // State, Computeds... // Methods readonly #httpClient = inject(HttpClient); async load() { const holidays = await lastValueFrom( this.#httpClient.get<Holiday[]>('/holiday') ); this.#state.update((state) => ({ ...state, holidays })); } } export const HolidayStore = signalStore( // withState, withComputed,... withMethods((store, http = inject(HttpClient)) => ({ async load() { const holidays = await lastValueFrom( http.get<Holiday[]>('/holiday') ); patchState(store, { holidays }); }, })) );
17. Live Coding
19. Twitter: @ngrx_io LinkedIn: NgRx Discord: discord.gg/ngrx Docs: ngrx.io Blog: dev.to/ngrx Workshops: ti.to/ngrx GitHub: github.com/ngrx/platform