Slide 1
Slide 1 text
Angular Signals
Signal basierte Komponenten und alles zu Effects
Yannick Baron
@yannick_baron
Slide 2
Slide 2 text
Signals
Reactive primitive
Hold value, notify when value changes
Integrated with Angular
👉 Results in knowing exactly which nodes need updating
Slide 3
Slide 3 text
Signals API
signal()
Create a writable Signal
set()
Set a new value to the Signal
update()
Update the Signal's value based on its current one
computed()
Create a read only Signal deriving its value from other Signals
Slide 4
Slide 4 text
Signals API - effect()
React to signal value changes
Used for side effects
logging, persisting to browser storage, ...
Executed once initially
Can not write to Signals by default
Reliant on the injection context
Returns an EffectRef to destroy the effect
Slide 5
Slide 5 text
Signal based Components
input() / output()
Creates a writable Signal bound to a component's inputs / outputs
model()
Creates a writable Signal that reflects changes (two way binding)
viewChild() / viewChildren()
Access references to components, directives and elements in the view
contentChild() / contentChildren()
Access references to components, directives and elements in the projected
content
Slide 6
Slide 6 text
Thank You!
https://www.thinktecture.com/thinktects/yannick-baron