Why State Is the Most Important Part of Your Angular Application

State is the foundation of every modern Angular application. A well-structured state management strategy determines not only how data flows through an application but also how scalable, maintainable, and performant it becomes. Without proper state management, applications quickly become hard to debug, difficult to scale, and prone to inconsistencies. This talk explores why state is the most crucial part of an Angular application, how to choose the right state management approach, and what common pitfalls to avoid. Whether using NgRx, the Signal Store, Signals, or a simple service-based approach, understanding and structuring state effectively is the key to long-term success.

Transcript

1. State is everywhere The underestimated foundation of modern frontend architectures Fabian Gosebrink
2. Every Angular application has state
3. Every Angular application has state Backbone of your UI and data
4. Every Angular application has state Backbone of your UI and data Different places
5. Every Angular application has state Backbone of your UI and data Different places Different formats and shapes
6. We have to deal with state.
7. Why state management matters
8. What is state?
9. What is state? All the data the user sees
10. What is state? All the data the user sees UI = fn(state)
11. What is state? All the data the user sees UI = fn(state) Backbone of every application
12. What is state? All the data the user sees UI = fn(state) Backbone of every application Reactivity
13. Why does state deserve attention? App
14. Why does state deserve attention? Feature Feature Feature … App
15. Why does state deserve attention? Component Component Component Component Component Component Component Component Component Component Component Component Component Component Component Component Component Component Component Component Feature Feature Feature Feature App
16. Why does state deserve attention? App Feature Component DOM Local Storage Route
17. We have to deal with state.
18. We have to manage state.
19. Demo Demo application git checkout main
20. Where does state live? Container component: products.component @Component({ /* ... */}) export class ProductsComponent implements OnInit { products = signal<Product[]>([]); } ngOnInit() { this.productsService .loadProducts() .subscribe((products) => this.products.set(products)); }
21. Where does state live? Container component: shell.component export class ShellComponent implements OnInit { cartProductsCount = signal(0); private readonly checkoutService = inject(CheckoutService); ngOnInit() { this.checkoutService.getCartProducts().subscribe((products) => { this.cartProductsCount.set(products.length); }); } } this.checkoutService.cartProductsChanged.subscribe((products) => { this.cartProductsCount.set(products.length); });
22. Where does state live? Container component: checkout.component @Component({ selector: 'app-checkout', }) export class CheckoutComponent { cartProducts = signal<Product[]>([]); totalAmount = signal(0); } // Code to set/manage state Presentational component: product-list @Component({ selector: 'app-product-list', }) export class ProductListComponent { products = input<Product[]>(); } someProp = computed(/* ... */)
23. Where does state live? Container Component Presentational Component Presentational Component Presentational Component Presentational Component Presentational Component Feature
24. Thinking about state shapes your components!
25. Where does state live? Shared services: checkout.service @Injectable({ providedIn: 'root' }) export class CheckoutService { readonly #cartProducts = signal<Product[]>([]); readonly #cartProductsChanged = new Subject<Product[]>(); cartProductsChanged = this.#cartProductsChanged.asObservable(); } // ...
26. The state explosion problem
27. The state explosion problem State lives in multiple places
28. The state explosion problem State lives in multiple places Services doing too much
29. The state explosion problem State lives in multiple places Services doing too much Components doing too much
30. The state explosion problem
31. The state explosion problem No ownership of data
32. The state explosion problem No ownership of data Manual subscriptions
33. The state explosion problem No ownership of data Manual subscriptions Problem gets bigger when app grows
34. The state explosion problem No ownership of data Manual subscriptions Problem gets bigger when app grows Leads to inconsistent data
35. The state explosion problem No ownership of data Manual subscriptions Problem gets bigger when app grows Leads to inconsistent data Less structure
36. Who owns the data?
37. Advantages of state management
38. Advantages of state management Central place for state
39. Advantages of state management Central place for state Reactivity and structure
40. Advantages of state management Central place for state Reactivity and structure Establishing a pattern
41. Advantages of state management Central place for state Reactivity and structure Establishing a pattern Simplicity
42. Advantages of state management Central place for state Reactivity and structure Establishing a pattern Simplicity Easy to debug
43. Advantages of state management Central place for state Reactivity and structure Establishing a pattern Simplicity Easy to debug Clean services and components
44. Advantages of state management Component and State Component and State Service and State Component and State Component and State Service and State Component and State Component and State Service and State App
45. Advantages of state management Component Component Component Component Component Component Service State Service Service App
46. Advantages of state management Component Component State Component Service State Shared State Component State Component State Component State Service Service State App
47. Advantages of state management Component Component State Component Service State Shared State Component State Component State WebSocket Service Component State Service State App
48. Advantages of state management Components Services Displaying UI Reacting to events Single responsibility Easy testable Pure business logic Store as abstraction Calling services Composing business logic Managing state Handling HTTP (pull) or web sockets (push)
49. The cleanest component checkout.component.ts @Component({ selector: 'app-checkout', imports: [ProductListComponent], template: ` <h3>Checkout</h3> <app-product-list [products]="store.products()" [totalAmount]="store.totalAmount()" (removeClicked)="store.removeProduct($event)" /> `, styleUrl: './checkout.component.scss', }) export class CheckoutComponent { readonly store = inject(CheckoutStore); }
50. Kinds of state App State Feature State Component State
51. Built-in facade pattern Services Signals State Methods … Components SignalStore ↔ Feature App
52. Composable Services Signals State Methods Custom store features Other stores Components SignalStore ↔ Feature App
53. Store in component my.component.ts @Component({ selector: 'app-shell', imports: [HeaderComponent], template: ` <app-title [count]="store.bookingCount()" /> <booking-list [bookings]="store.bookings()" /> <booking-form (add)="store.addBooking($event)" /> `, providers: [BookingStore] }) export class MyComponent { store = inject(BookingStore); }
54. Store in component booking.store.ts type BookingState = { bookings: Booking[] } export const BookingStore = signalStore( withState<BookingState>({ bookings: [] }), withComputed((store) => ({ bookingCount: computed(() => store.bookings().length) })), withMethods((store) => ({ addBooking(booking: Booking) { patchState(store, { bookings: [...store.bookings(), booking] }) }, })), );
55. Store in app or feature booking.store.ts type BookingState = { bookings: Booking[] } export const BookingStore = signalStore( { providedIn: 'root' }, withState<BookingState>({ bookings: [] }), withComputed((store) => ({ bookingCount: computed(() => store.bookings().length) })), withMethods((store) => ({ addBooking(booking: Booking) { patchState(store, { bookings: [...store.bookings(), booking] }) }, })), );
56. Localize and globalize src/app/ features/ checkout/ product-detail/ products/ container/products/ products.component.ts products.store.ts presentational/ service/ store/ products-feature.store.ts shell/ shared/ models/ services/ store/ global-checkout.store.ts State only for this component Next to the component
57. Localize and globalize src/app/ features/ checkout/ product-detail/ products/ container/products/ products.component.ts products.store.ts presentational/ service/ store/ products-feature.store.ts shell/ shared/ models/ services/ store/ global-checkout.store.ts State only for this component Next to the component State for the complete feature Folder inside that feature
58. Localize and globalize src/app/ features/ checkout/ product-detail/ products/ container/products/ products.component.ts products.store.ts presentational/ service/ store/ products-feature.store.ts shell/ shared/ models/ services/ store/ global-checkout.store.ts State only for this component Next to the component State for the complete feature Folder inside that feature State valid for complete app Outside of a feature. Example: shared folder, library, …
59. Localize and globalize src/app/ features/ checkout/ product-detail/ products/ container/products/ products.component.ts products.store.ts presentational/ service/ store/ products-feature.store.ts shell/ shared/ models/ services/ store/ global-checkout.store.ts State only for this component Next to the component State for the complete feature Folder inside that feature State valid for complete app Outside of a feature. Example: shared folder, library, … Find the sweet spot Growing fast, not too big
60. Where to put the state Shell Products Product Details Checkout
61. Where to put the state Shell Products Product Details Checkout Shared
62. Where to put the state Component Shell Component Component Component Products Product Details Checkout Shared
63. Where to put the state Checkout Products Component Component Component Component Products Product Details Checkout Count of Products in Checkout Single Product All Products Total Amount Shell Shared
64. Where to put the state Component Component Component Component Products Product Details Checkout Count of Products in Checkout Single Product All Products Total Amount Shell Checkout Products Shared
65. Where to put the state Component Component Component Component Products Product Details Checkout Count of Products in Checkout Single Product All Products Total Amount Shell Checkout Products Shared
66. Where to put the state Component Component Count of Products in Checkout Shell Component Single Product All Products Total Amount Component Products Product Details Checkout Products Checkout Shared
67. Where to put the state Total Amount Component Component Component Count of Products in Checkout All Products Single Product Products Product Details Shell Checkout Products Component Checkout Shared
68. Where to put the state Component Component Component Component Count of Products in Checkout All Products Single Product Total Amount Products Product Details Checkout Shell Checkout Products Shared
69. Backend API Products Endpoint Checkout Endpoint
70. State and derived state State based on API All Products Single Product Checkout Products Derived State Count of Products in Checkout Total Amount of Products Single Product (if possible, load it otherwise) Checkout Products (if possible, load it otherwise)
71. Loading an item if it does not exist already is business logic.
72. Loading an item if it does not exist already is business logic. Perfect for the store layer.
73. Where to put the state (advanced version) Component Component Component Component Count of Products in Checkout All Products Single Product Total Amount Products Product Details Checkout Shell Checkout Products Products API Checkout API Shared API
74. Where to put the state (advanced version) Component Component Component Component Count of Products in Checkout All Products Single Product Total Amount Products Product Details Checkout Shell Checkout Products Products API Checkout API Shared API
75. Where to put the state (advanced version) Component Component Component Component Count of Products in Checkout All Products Single Product Total Amount Products Product Details Checkout Shell Checkout Products Products API Checkout API Shared API
76. Where to put the state (advanced version) ☠ Component Component Component Component Count of Products in Checkout All Products Single Product Total Amount Products Product Details Checkout Shell Checkout Products Products API Checkout API Shared API
77. Where to put the state (advanced version) Component Component Count of Products in Checkout Shell Products Component Component Single Product Total Amount Product Details Checkout All Products Checkout Products Shared Products API Checkout API API
78. Where to put the state (advanced version) Component Component Count of Products in Checkout Shell Products Component Component Single Product Total Amount Product Details Checkout All Products Checkout Products Shared Products API Checkout API API
79. Where to put the state (advanced version) Component Component Count of Products in Checkout Shell Products Component Component Single Product Total Amount Product Details Checkout All Products Checkout Products Shared Products API Checkout API API
80. Where to put the state (advanced version) Component Component Count of Products in Checkout Shell Products Component Component Single Product Total Amount Product Details Checkout All Products ← Checkout Products Products API Checkout API Shared API
81. Where to put the state (advanced version) Component Component Count of Products in Checkout Shell Products Component Component Single Product Total Amount Product Details Checkout All Products ← Checkout Products Products API Checkout API Shared API
82. Demo Demo application git checkout 04-entity-pattern
83. Requirements shape state.
84. State shapes architecture.
85. Let's talk about RxJS!
86. rxMethod booking.store.ts type BookingState = { booking: Booking } export const BookingStore = signalStore( //... withMethods((store, service = ...) => ({ loadBooking: rxMethod<number>( exhaustMap((id) => { return service.load(id).pipe( tapResponse({ next: (booking) => patchState(store, { booking }), error: (err) => console.error(err) }) ); }) ), })), );
87. Promises booking.store.ts type BookingState = { booking: Booking }; export const BookingStore = signalStore( // ... withMethods((store, service = ...) => ({ async loadBooking(id: number): Promise<void> { const booking = await service.load(id); patchState(store, { booking }); }, })), );
88. Promises booking.store.ts type BookingState = { booking: Booking; error?: unknown }; export const BookingStore = signalStore( // ... withMethods((store, service = ...) => ({ async loadBooking(id: number): Promise<void> { try { const booking = await service.load(id); patchState(store, { booking }); } catch (error) { patchState(store, { error }); } }, })), );
89. Problems with promises in the SignalStore Requires manual error handling No cancellation Harder to compose Edge cases harder to test
90. Capabilities of rxMethod my.component.ts @Component({ /* ... */ }) export class MyComponent { store = inject(BookingStore); } constructor() { // executed one time store.loadBooking(42) }
91. Capabilities of rxMethod my.component.ts @Component({ /* ... */ }) export class MyComponent { store = inject(BookingStore); constructor() { // executed one time store.loadBooking(42) } } // executed each time the signal changes const id = signal(42); store.loadBooking(id)
92. Capabilities of rxMethod my.component.ts @Component({ /* ... */ }) export class MyComponent { store = inject(BookingStore); constructor() { // executed one time store.loadBooking(42) // executed each time the signal changes const id = signal(42); store.loadBooking(id) } } // executed each time a new value is emitted const id$ = of(42, 43, 44); store.loadBooking(id$)
93. Custom store features
94. Custom store features Option to extract reusable parts of the store
95. Custom store features Option to extract reusable parts of the store Compose features directly into the store
96. Custom store features Option to extract reusable parts of the store Compose features directly into the store Scale stores without increasing complexity
97. Custom store feature my-name-feature.ts export function withMyNameFeature() { return signalStoreFeature( withState({ firstName: 'Fabian', lastName: 'Gosebrink' }), withComputed(({ firstName, lastName }) => ({ fullName: computed(() => `${firstName()} ${lastName()}`), })), } withMethods(({ firstName, lastName }) => ({ logName() { console.log(firstName(), lastName()); } })) );
98. Custom store feature Usage export const MyStore = signalStore( withState({ myProp: 99 }), withMyNameFeature(), withComputed(/* ... */), withMethods(/* ... */), withHooks(/* ... */) ); // Usage readonly store = inject(MyStore); store.firstName(); store.lastName(); store.fullName(); store.logName(); store.myProp();
99. Entity management
100. Entity management Plugin @ngrx/signals/entities
101. Entity management Plugin @ngrx/signals/entities Manage entity collections
102. Entity management Plugin @ngrx/signals/entities Manage entity collections Adds methods, signals and entity capabilities to the store
103. Entity management booking.store.ts type Booking = { id: string; customerName: string; date: string; }; // Usage export const BookingStore = signalStore( withEntities<Booking>(), // ... ); readonly store = inject(BookingStore); // automatically added store.ids(); store.entityMap(); store.entities();
104. entityMap { 'first-booking-id': { id: 'first-booking-id', customerName: 'John Doe', date: '2025-01-15', }, 'second-booking-id': { id: 'second-booking-id', customerName: 'Jane Smith', date: '2025-02-03', }, }
105. Entity management booking.store.ts export const BookingStore = signalStore( // ... withEntities<Booking>(), withComputed((store) => ({ allBookings: computed(() => store.entities()), bookingCount: computed(() => store.entities().length), })), );
106. Entity management booking.store.ts export const BookingStore = signalStore( // ... withEntities<Booking>(), withMethods((store) => ({ addBookings(bookings: Booking[]) { patchState(store, addEntities(bookings)); }, updateBooking(booking: Booking) { patchState(store, updateEntity({ id: booking.id, changes: booking })); }, removeBooking(id: string) { patchState(store, removeEntity(id)); }, })), );
107. Entity management Available methods addEntity(…) addEntities(…) prependEntity(…) prependEntities(…) updateEntity(…) updateEntities(…) updateAllEntities(…) setEntity(…) setEntities(…) setAllEntities(…) upsertEntity(…) upsertEntities(…) removeEntity(…) removeEntities(…) removeAllEntities(…)
108. Named entity collections Usage type Booking = { ... }; type Customer = { ... }; // Usage export const BookingStore = signalStore( withEntities({ entity: type<Booking>(), collection: 'booking' }), withEntities({ entity: type<Customer>(), collection: 'customer' }), // ... ); readonly store = inject(BookingStore); // automatically added store.bookingIds(); store.bookingEntityMap(); store.bookingEntities(); store.customerIds(); store.customerEntityMap(); store.customerEntities();
109. Events plugin NgRx Store NgRx Effects RxJS
110. Events plugin Events Dispatcher Store View
111. Events plugin booking.store.ts export const bookingApiEvents = eventGroup({ source: 'Bookings API', events: { bookingsLoaded: type<void>(), bookingsLoadedSuccess: type<Booking[]>(), }, }); export const bookingUserEvents = eventGroup({ source: 'Bookings User', events: { pageOpened: type<void>(), }, });
112. Events plugin booking.store.ts // ... export const BookingStore = signalStore( withState<BookingState>(initialBookingState), withReducer( on(bookingApiEvents.bookingsLoadedSuccess, ({ payload }) => ({ bookings: payload })), ), );
113. Events plugin booking.store.ts // ... export const BookingStore = signalStore( // .. withEventHandlers((store, events = inject(Events), bookingService = inject(BookingService)) => ({ loadBookings$: events .on(bookingUserEvents.pageOpened) .pipe( exhaustMap(() => bookingService.loadBookings().pipe( mapResponse({ next: (bookings) => bookingApiEvents.bookingsLoadedSuccess(bookings), error: console.error, }), ), ), ), })), );
114. Events plugin bookings.component.ts @Component({ /* ... */ }) export class BookingsComponent { readonly dispatcher = inject(Dispatcher); } constructor() { this.dispatcher.dispatch(bookingUserEvents.pageOpened()); }
115. Events plugin bookings.component.ts @Component({ /* ... */ }) export class BookingsComponent { readonly dispatcher = inject(Dispatcher); } constructor() { this.dispatcher.dispatch(bookingUserEvents.pageOpened()); } @Component({ /* ... */ }) export class BookingsComponent { readonly dispatch = injectDispatch(bookingUserEvents); } constructor() { this.dispatch.pageOpened(); }
116. Consuming stays the same. Only updating state changes.
117. Testing
118. Testing Wrong on state: writing state is wrong
119. Testing Wrong on state: writing state is wrong Right on state: consuming from the UI is wrong
120. Don't let state happen by accident
121. Thank you Fabian Gosebrink