Getting Started with Angular Signals

This is a slide deck on Angular Signals by Dhananjay Kumar

Transcript

1. Signal A Signal is a value that is “reactive,” meaning it can notify interested consumers when it changes.
2. Angular Signals Dhananjay Kumar
3. @debug_mode Dhananjay Kumar ✓ debugmode@outlook.com ✓ https://www.linkedin.com/in/dhananjaykumar07/ Contact me for Training and Consulting on Angular. Founder : Nomad<coder/>
4. Angular Signal is a wrapper around a value.
5. Signals
6. Creating Signal A signal is created by calling the signal() function with the initial value.
7. Reading Signal
8. Signal Getter function a() Setter function set() update() value
9. .set() – to change the value directly .update() – to compute a new value from the previous one
10. Signals Signals Effects Computed
11. Computed signals A computed signals create derived values based on one or more dependency signal values.
12. Computed Signals
13. Computed Signal A computed signal derives its value from other signals.
14. Computed Signal Computations are lazy Computation are disposed of automatically Computations are glitch- free It is memorized It is Read-Only you should not write to other signal here
15. Computed Signal Demo
16. 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.
17. Effects
18. Effects An effect is an operation that runs whenever one or more signal values change.
19. Effects use-cases ✓ Synchronizing data between multiple independent models ✓ Triggering network requests ✓ Performing custom rendering actions such as <canvas>, charting library, and other third-party UI libraries ✓ Logging data being displayed and when it changes, either for analytics or as a debugging tool.
20. Effects Effects Root View
21. Root Effects ✓ Propagating state changes to other signals ✓ Effects Synchronizing state with the backend or some local storage ✓ Rendering not tied to a component ✓ Logging/Debugging
22. Root Effects ✓ Root effects are scheduled via a macro task, on each ApplicationRef.tick ✓ They are queued in FIFO order: effects that become dirty first will execute first ✓ One particular consequence of dirty root effects running until the queue is empty is that you might see effects running kind-of synchronously .
23. View Effects View effects are effects within the component hierarchy and execute as part of change detection cycles.
24. Scheduling of Effects ✓ Effects run asynchronously 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
25. Effects Do not write to a signal in the effect
26. Effects The effect() function requires Injection Context
27. 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
28. Effects Manual cleanup
29. 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.
30. Equality function If two values are equal block update of signal value stop change propagation
31. Equality function Compares primitives values using === semantics Treats objects and arrays always unequal
32. Component Communication
33. Internal Internally the signals implementation is defined in two abstractions
34. Internal Producer PRODUCES reactivity Consumer CONSUMES reactivity
35. Internal • The value that can deliver change notifications • Signal Producers • It represents a reactive context depends on producers • Computed , Effect , Template Consumers
36. Internal Reactive Context Computed Effect Template
37. Internal
38. Internal Consumer keeps track of Producers Producer keeps track of only LIVE CONSUMERS
39. Internal The consumer is called live ✓ It sets the consumerIsAlways property of the reactive node is set to true. ✓ It is also a producer, which is depended upon by a live consumer. •live effect •Not live computed
40. Change Detection – Component Tree Root Component Child Component -1 CC-11 CC -12 CC-121 Child Component- 2 CC -21 CC- 211 CC-22 User clicks a button
41. Current Component Root Component Child Component -1 CC-11 CC -12 CC-121 Child Component- 2 CC -21 CC- 211 CC-22 User clicks a button Root Component Child Component -1 CC-11 CC -12 CC-121 Child Component- 2 CC -21 CC- 211 CC-22
42. Signal based component Root Component Child Component -1 CC-11 CC -12 CC-121 Child Component- 2 CC -21 CC- 211 CC-22 User clicks a button Root Component Child Component -1 CC-11 CC -12 CC-121 Child Component- 2 CC -21 CC- 211 CC-22
43. Input Signal
44. Input Signal • Pass signal as input • Required Input Signal • Optional Input Signal • Input with Default Value • Input Aliasing • Transform function with input value • The effect function runs side effects whenever the input changes
45. Thanks Dhananjay Kumar • Email – debugmode@outlook.com • @debug_mode • Contact me for Training and Consulting on Angular. • Talk to me about the Indian Angular community and the ng-India. https://debugmode.net/