4 | What are Angular Signals 🚦?
5 | {{response1.hidden ? 'expand_more' : 'chevron_right'}}
6 |
7 | Signals are a reactive value, technically are a zero-argument functions [(() => T)]. When executed, they return the current value of the signal.
14 | how do we create a signal ?
15 | {{response2.hidden ? 'expand_more' : 'chevron_right'}}
16 |
17 | To create and initialize a signal, we call the signal() function:
const movies = signal<Movie[]>([]);This function returns a specific type of signal called WritableSignal.
Signals are getter functions, but the WritableSignal type gives us the ability to modify the value using three methods:
-
23 |
set(value: T): set the signal to a new value, and notify any dependents
24 | update(fn: (value: T) => T): deriving a new value (Update the value of the signal based on its current value, and notify any dependents), The update operation uses theset()operation for performing updates behind the scenes.
25 | modify(fn: (value: T) => void): Performing an internal mutation of the current value (Update the current value by mutating it in-place, and notify any dependents)
26 |
32 | But what does it mean to notify any dependents?" 😕?
33 | {{response3.hidden ? 'expand_more' : 'chevron_right'}}
34 |
35 | This is the magic part of Signal. Now we will see what dependents are for Signals and how to notify them.
37 |
Signal is not just a value that can be modified, it is more than that, Signal is a reactive value and is a producer that notify consumers(dependents) when it changes.
38 |
40 |
45 | So, how we can add consumer to Signal ?
46 | {{response4.hidden ? 'expand_more' : 'chevron_right'}}
47 |
48 | We can add consumers by using Effect and Computed
50 |Effect
51 |Sometimes, when a signal has a new value, we may need to add a side effect. To accomplish this, we can use the effect() function.
52 |
Effect schedules and runs a side-effectful function inside a reactive context.
53 | Signature of the effect function:
54 |
55 | export function effect(effectFn: () => EffectCleanupFn | void, options?: CreateEffectOptions): EffectRef
56 |
57 |
Computed
61 |What if there is another value that depends on the values of other signals, and needs to be recalculated whenever any of those dependencies changes?
62 |To accomplish this, we can use the computed() function. Computed creates a memoizing signal, which calculates its value from the values of some number of input signals.
Signature of the computed function:
64 |
65 | export function computed<T>(computation: () => T, options?: CreateComputedOptions<T>): Signal<T>
66 |
67 |
I create a signal in the component with movieSig = signal<Movie|null>(null);
74 | 75 |
And I create another signal using computed()
76 |
77 | newMovieSig = computed( () => {{'{'}}
82 |
78 | let newMovie ={{'{'}}name : "Titanic",genre : "Romance",releaseYear: 1997, upVote:this.movieSig()?.upVote{{'}'}};
79 | return newMovie;
80 | {{'}'}}
81 |
And this is the informations of the movie, as you can see, there is no movie because we initialize our Signal with null
First Signal
88 |Signal Computed
107 |
131 | This will execute this code to set new value :
132 | movieSig.set({{'{'}}
133 | name: 'Spider-Man',
134 | genre: 'Action,
135 | Aventure',
136 | releaseYear: 2002{{'{'}})
137 |
138 |
141 | This will execute this code to derived a value from the current value :
142 | movieSig.update((movie) => {{'{'}}
143 | if(movie)
144 | movie.upVote+1;
145 | return movie;
146 | })
147 |
148 |
151 | This will execute this code to mutate the value :
152 | movieSig.mutate((movie) => {{'{'}}
153 | if (movie) {{'{'}}
154 | movie.upVote = 2000;
155 | {{'}'}}{{'}'}});
156 |
157 |
161 | This will execute this code to create an effect :
162 | runInInjectionContext(this.injector,
163 | () =>(this.effectSig = effect(() => {{'{'}}
164 | alert(`side effect angular signal after movie changes ${{'{'}}JSON.stringify(this.movieSig()
165 | ){{'}'}}`
166 | );{{'}'}})));
167 |
168 |
169 |
175 | This will execute this code to destroy the effect :
176 | effectSig?.destroy();
177 |
178 |
181 | 182 | 183 |
184 | 185 |