Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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