Getting Started with Angular Signals

Slide 1

Slide 1 text

Signal A Signal is a value that is “reactive,” meaning it can notify interested consumers when it changes.

Slide 2

Slide 2 text

Angular Signals Dhananjay Kumar

Slide 3

Slide 3 text

@debug_mode Dhananjay Kumar ✓ [email protected] ✓ https://www.linkedin.com/in/dhananjaykumar07/ Contact me for Training and Consulting on Angular. Founder : Nomad

Slide 4

Slide 4 text

Angular Signal is a wrapper around a value.

Slide 5

Slide 5 text

Signals

Slide 6

Slide 6 text

Creating Signal A signal is created by calling the signal() function with the initial value.

Slide 7

Slide 7 text

Reading Signal

Slide 8

Slide 8 text

Signal Getter function a() Setter function set() update() value

Slide 9

Slide 9 text

.set() – to change the value directly .update() – to compute a new value from the previous one

Slide 10

Slide 10 text

Signals Signals Effects Computed

Slide 11

Slide 11 text

Computed signals A computed signals create derived values based on one or more dependency signal values.

Slide 12

Slide 12 text

Computed Signals

Slide 13

Slide 13 text

Computed Signal A computed signal derives its value from other signals.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Computed Signal Demo

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

Effects

Slide 18

Slide 18 text

Effects An effect is an operation that runs whenever one or more signal values change.

Slide 19

Slide 19 text

Effects use-cases ✓ Synchronizing data between multiple independent models ✓ Triggering network requests ✓ Performing custom rendering actions such as , charting library, and other third-party UI libraries ✓ Logging data being displayed and when it changes, either for analytics or as a debugging tool.

Slide 20

Slide 20 text

Effects Effects Root View

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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 .

Slide 23

Slide 23 text

View Effects View effects are effects within the component hierarchy and execute as part of change detection cycles.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Effects Do not write to a signal in the effect

Slide 26

Slide 26 text

Effects The effect() function requires Injection Context

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Effects Manual cleanup

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

Equality function If two values are equal block update of signal value stop change propagation

Slide 31

Slide 31 text

Equality function Compares primitives values using === semantics Treats objects and arrays always unequal

Slide 32

Slide 32 text

Component Communication

Slide 33

Slide 33 text

Internal Internally the signals implementation is defined in two abstractions

Slide 34

Slide 34 text

Internal Producer PRODUCES reactivity Consumer CONSUMES reactivity

Slide 35

Slide 35 text

Internal • The value that can deliver change notifications • Signal Producers • It represents a reactive context depends on producers • Computed , Effect , Template Consumers

Slide 36

Slide 36 text

Internal Reactive Context Computed Effect Template

Slide 37

Slide 37 text

Internal

Slide 38

Slide 38 text

Internal Consumer keeps track of Producers Producer keeps track of only LIVE CONSUMERS

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Input Signal

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Thanks Dhananjay Kumar • Email – [email protected] • @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/