AngularArchitects.io | @ManfredSteyer
Migrating to Signals:
A Practical Workshop
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Agenda
• Austrian Desserts
• Signals & Computed
• Input Signals & Model Signals
• Signals & Change Detection
• Effects
• RxJS-Interop
• Stores
• BONUS: NGRX Signal Store
Slide 6
Slide 6 text
About me…
Manfred Steyer, ANGULARarchitects.io
(Remote) Angular Workshops
and Consulting
Google Developer Expert
for Angular
Blog, Books, Articles,
and Talks about Angular
Manfred Steyer
Slide 7
Slide 7 text
Austrian Desserts:
Example App
Slide 8
Slide 8 text
Demo
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Your Options
a) Just watch the live coding
b) Check out the solution branches
c) Do labs later
d) Do labs during live coding
Slide 15
Slide 15 text
Demo
Slide 16
Slide 16 text
Demo
https://angularArchitects.io/ng-conf-24
Slide 17
Slide 17 text
Signals &
Computed
Slide 18
Slide 18 text
Simple Reactivity with Signals
Signal
4711
Consumer
read
set
notify
4712
Slide 19
Slide 19 text
Demo
Branch: 01-signals-starter
Slide 20
Slide 20 text
Architecture Rule #1
Synchronously derive state where possible
Slide 21
Slide 21 text
Input Signals &
Model Signals
Slide 22
Slide 22 text
Demo
Branch: 02-sub-comp-starter
Slide 23
Slide 23 text
Signals
& Change Detection
Slide 24
Slide 24 text
Demo
Branch: 03-cd-starter
Slide 25
Slide 25 text
Effects
Slide 26
Slide 26 text
Demo
Branch: 04-effects-starter
Slide 27
Slide 27 text
Architecture Rule #2
Avoid effects propagating state and signal writes
Slide 28
Slide 28 text
RxJS-Interop
Slide 29
Slide 29 text
Demo
Branch: 05-rxjs-interop-starter
Slide 30
Slide 30 text
Demo
Branch: 06-unsubscribe-experiment-starter
Slide 31
Slide 31 text
Stores
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Stores Streamline Reactive Flow
Component
Store
"Intention" Signal
sync/ async
computed()
computed()
Slide 36
Slide 36 text
Demo
Branch: 07-state-service-starter
Slide 37
Slide 37 text
Architecture Rule #3
Stores make your reactive flow more manageable
Conclusion
Architecture Rule #1
Synchronously derive state where possible
Architecture Rule #2
Avoid effects propagating state and signal writes
Architecture Rule #3
Stores make your reactive flow more manageable
Component
Store