@ngrx/signals Managing state on component level Yannick Baron @yannick_baron Software Architecture Consultant

Reactive Applications react to user interaction clicks, hover, inputs, ... data changes receiving data (e.g. http) continuous data updates (e.g. websockets) state changes form value changes (e.g. checkbox) collapsible component settings changes

What/where is state? router state which route is active router params / query params application state active user wishlist items / notifications component state game details selected video video playing?

Common concepts in advanced reactive Angular subject in a service combining streams to deliver view model subscribing via async pipe OnPush change detection + immutability 👉 performance boost more control over change detection 👉 no unforeseen side effects by updating state from different sources

Downsides of RxJS (for template rendering) Observables asynchronous by default AsyncPipe default null value Subscription management Recheck all template bindings No reactive inputs

Enter Signals Reactive primitive Hold value, notify when value changes Integrated with Angular 👉 Results in knowing exactly which nodes need updating

Why @ngrx/signals? signal based state management on component level conveniently handle multiple signals brings rxjs interop to manage user interaction gracefully brings entity management out of the box extensible API through store features functional principles

@ngrx/signals: Whats in it? signalState small scale simple state management signalStore elaborate state management including logic patchState method to transition between states rxMethod RxJS based callable methods (ComponentStore effects) store features extend the base store with recurring features

Code with me? https://github.com/thinktecture/ngrx-demo Branch: signal-store/code-with-me

Thank You! https://www.thinktecture.com/thinktects/yannick-baron