Angular Signals: Signal basierte Komponenten und alles zu Effects

In diesem Teil der Webinar Serie sehen wir uns an wie wir die die neuen Angular Signals APIs in unserer Komponentenarchitektur einsetzen können, sowie mit effects einfach auf Werteänderung reagieren können. Des Weiteren, sehen wir uns an, wie effects im Detail funktionieren und welche Rolle dabei der Injection Context spielt.

Agenda:
- Input/Output/Model
- Wo können Effekte deklariert und gestartet werden?
- Effect cleanup und EffectRef

Transcript

1. Angular Signals Signal basierte Komponenten und alles zu Effects Yannick Baron @yannick_baron
2. Signals Reactive primitive Hold value, notify when value changes Integrated with Angular 👉 Results in knowing exactly which nodes need updating
3. 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
4. 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
5. 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
6. Thank You! https://www.thinktecture.com/thinktects/yannick-baron