How Angular Signals work under the hood?

Transcript

1. How Angular Signals work under the hood? Rohtash Sethi
2. About Me... 👨‍💻 10+ years of experience in Angular 🌟 Senior Principal Software Engineer at Secureworks (Sophos) 🎙️ Founder of NG Delhi Community 📚 Angular Content Creator
3. Most Frequently asked Question on Reactive State Management in Angular?
4. What is Observable/Subject? Beginners/Intermediate
5. Can you write a custom implemention of Observable/Subject? Advanced
6. What is an Angular Signal? Advanced
7. Angular Signal A lightweight wrapper around a value set read notify Signal as Producer Comsumer 1 const counter = signal<number>(1); counter.set(2); counter.update(count => count + 1); counter() Example 1 (basic)
8. Angular Signal Simplified State Management Improved Performance Reduced Boilerplate Code Benefits
9. Under the hood const counter = signal(1); let double = computed(() => counter() * 2); console.log(double()); // 2 double = null; Example 2 (with computed)
10. Under the hood Dependency Graph of Reactive Nodes After Creating and calling a Signal in Template
11. Under the hood Dependency Graph of Reactive Nodes After Creating computed Signal using counter
12. Under the hood Dependency Graph of Reactive Nodes After assigning null to the double holding a computed signal
13. Angular Signal Example 3 Let’s dive deeper...
14. Angular Signal are Glitch Free
15. Angular Signals use the push/pull algorithm
16. ▶️ Phase 1: Push 🔁 Phase 2: Pull Angular Signals use the push/pull algorithm 1.sum() is dirty → so it asks for double() 2.double() is dirty → so it recomputes using the new count = 2 → double = 4 3.Now sum = 2 + 4 = 6 ✅ 1.count changes → it notifies all its dependents (double, sum) 2.These are marked dirty but not re-evaluated 3.effect is also marked dirty but not run ⏳ Nothing is recomputed yet.
17. Signal APIs For improved Developer Experience Parent/Child Interaction State Management signal (writable) computed (readonly) input (readonly) output model (writable) RxJS Interoperability toSignal toObservable Signal based queries viewChild & viewChildren contentChild & contentChildren effect (side effect) linkedSignal (writable) Output EventEmitter Interop outputFromObservable outputToObservable From v20, all Signal APIs are stable :)
18. Github Repo Signals Demo
19. Github Repo Signal Store Tutorial
20. Let’s keep in touch on LinkedIn
21. Thank you