Angular Signal Zero to One : ng-India 2025

Dhananjay Kumar ng-India 2025 Angular Signal Presentation

Transcript

1. Angular Signals- Zero to One Dhananjay Kumar Founder, Nomad</Coder>
2. Dhananjay Kumar ✓Founder NomadCoder ✓Building ng-India community ✓Published Author ✓ Contact me for Training and Consulting on Angular. @debug_mode
3. Signal A Signal is a value that is “reactive,” meaning it can notify interested consumers when it changes.
4. Signals signal computed effect resource Signals
5. Angular Signal is a wrapper around a value.
6. signal()
7. .set() – to change the value directly .update() – to compute a new value from the previous one
8. Signal pushes values in a Reactive Context
9. Reactive Context In Angular, a reactive context refers to the environment where Angular automatically tracks and reacts to signal changes or other reactive primitives. When a signal is accessed within a reactive context, Angular subscribes to it and ensures that any changes to the signal trigger updates to the dependent computations or templates.
10. Reactive Context
11. Reactive Context Reactive Context Computed Effect Template resource When you read a signal value in a reactive context, Angular maintains the Reactive Graph for that
12. Reactive Context 1 ? ? 4 5 6 7 resource rxResource httpResource
13. Computed Signals Computed signals are read-only signals that derive their value from other signals.
14. Computed Signals
15. A computed signal derives its value from other signals.
16. Computed Signals A computed signal is not a live consumer, and value is pushed to it only when it is inside a reactive context
17. Computed Signal ✓It is read-only ✓It does not have set and update methods. ✓It should not write to other signals. ✓It can have an optional equality function. ✓ It is not writable.
18. Do not write to other signals inside a computed
19. Quiz
20. linkedSignal The linkedSignal manages local states that depend on other signals. It creates a writable signal that updates automatically when the signals it depends on change.
21. linkedSignal
22. linkedSignal ✓It is a WritableSignal signal ✓It does have set and update methods. ✓It depends on the existing signal, causing its value to be recomputed whenever the source signal changes. ✓It is different than the computed as they are read-only.
23. Effects An effect is a side-effectful operation which reads the value of zero or more signals, and is automatically scheduled to be re-run whenever any of those signals changes.
24. Effects Effects are a construct that executes a reactive function whenever the signals it reads are updated.
25. Effects It is automatically scheduled to be re-run whenever any of those signals changes
26. Effects An effect is an operation that runs whenever one or more signal values change.
27. Effects Root Effects View Effects
28. Root Effects ✓ Top-level effects ✓ Independent of component updates ✓ Created in service
29. Root Effects Root Effects are scheduled via a macrotask, on each ApplicationRef.tick. They are queued in FIFO order: effects that become dirty first will execute first.
30. Root Effects •Propagating state changes to other signals •Synchronizing state with the backend or some local storage •Rendering not tied to a component •Logging/Debugging
31. View Effects View effects are effects within the component hierarchy and execute as part of change detection cycles. Because of this timing, view effects can be used to respond to input signal changes or to update state used in child components
32. Effects The effect execution timing is not guaranteed and is unspecified, so should not depend on any observed execution timing.
33. Scheduling of view Effects ✓ Effects run during the Change Detection Process. ✓ Effects will execute in response to their dependencies changes at some point in the future. ✓ Effects always run at least Once ✓ Effects will execute minimal number of times
34. Effects The effect() is always alive ✓ An effect created within components, directives, or service are destroyed when the same is destroyed. ✓ By default, Angular effects lifespan is linked to the underlying DestroyRef in the framework. ✓ Life span of an effect can be manually controlled by passing manualCleanup value to true
35. Effects The effect() function requires Injection Context
36. Effects Manual cleanup
37. AfterRenderEffect ?
38. Equality function ✓ The signal function optionally specifies an equality comparator function. ✓ The comparator decides whether the newly supplied value is the same or different compared to the current value. ✓ Equality functions can be provided to both writable and computed signals.
39. Equality function If two values are equal block update of signal value stop change propagation
40. Equality function Compares primitives values using === semantics Treats objects and arrays always unequal
41. Component Communication
42. Thanks Dhananjay Kumar • Email – Dhananjay@nomadcoder.ai • Contact me for Training and Consulting on Angular. • Talk to me about the Indian Angular community and speaking at ng-India. https://debugmode.net/