Reactive Primitives in Signals

[00:00 - 00:13] In the previous lesson, we were able to create and define different types of signals that take in different data types. In this lesson, you get to learn about the different reactive primitives available in signals.

[00:14 - 00:30] These primitives include Writable signals, computed signals, and effects. So to define the first reactive primitive we have, which is Writable signals, Writable signals provide an API for updating their values directly.

[00:31 - 00:39] You can create the Writable signal by calling the signal function with the signals initial value. So update the value of the Writable signal.

[00:40 - 00:58] You can make use of the set method, which helps to define a new value or the update method, which receives and updates the previous value of the signal. We can make use of the update method for manipulating immutable data types, which are strings, booleans, and numbers.

[00:59 - 01:10] We can now move on to the next reactive primitives in signals, which is the computed signal. With the computed signals, the computed signals are read-only signals that derive their value from the other signals.

[01:11 - 01:28] We define computed signals with the computed function and specify a derivation, which provides more details when we get into the code part of this lesson. The final reactive primitives we are going to look at in this lesson is called "effect".

[01:29 - 01:40] Signals are useful because they notify interested consumers when they change. An effect is an operation that runs whenever one or more signals values change.

[01:41 - 01:47] An effect is an operation that runs whenever one or more signal value changes. You can create an effect with the effect function.

[01:48 - 01:53] With effects, we are able to perform the following functions. Log in data being displayed when it changes.

[01:54 - 02:01] That is, being used for debugging. We can use effects for keeping data in sync with the Windows local Storage.

[02:02 - 02:17] We can make use of effects to add custom document objects model that can be expressed with template syntax. And finally, performing custom rendering to a canvas charting library or other third party UI libraries.

[02:18 - 02:38] It is worthy to note that out of all these reactive primitives and signals, the effects is still in developer preview and still awaiting more changes before it is fully released in the next version of Angular. So currently in version 17, which is used for this course, effects are still in developer preview.

[02:39 - 02:56] And with that, we can go in depth by looking at some code examples of how to practicalize all the reactive primitives we just explained. Now that we are inside of Visual Studio Code, we can now create some examples of how the different reactive primitives work.

[02:57 - 03:12] But the first reactive primitive we're going to work with in signals is called the Writable signals. You can recall the Writable signals has two default methods available, which are sets method and the updates method.

[03:13 - 03:24] So what we intend to do is to make use of the first method, which is called the set method to toggle the view on the HTML templates. How do we intend to do this?

[03:25 - 03:32] The first thing we need to do is to create a variable called set data. I'm going to assign it to a signal.

[03:33 - 03:39] And the initial state is going to be false. As you can see above, we have signal already imported.

[03:40 - 04:02] That's why we are not getting any form of errors. Next up, we're going to create a function called hide and show within this method, we're going to create the if condition that says if this dot sets data is equals to false, then we open a bracket.

[04:03 - 04:22] We can now say this dot sets data as true. We can now say this dot sets data dot as you can see, these are the different methods available because in the set data signal, we have updates, we have sets.

[04:23 - 04:30] So we need to make use of sets. I'm going to set the value to true when this dot sets data is equals to false.

[04:31 - 04:38] This helps us to create a form of toggle. And then else we set it back to false.

[04:39 - 04:48] So we can just grab this dot sets data dot sets and pass in false. We're going to say what we've done so far, head straight to the HTML file.

[04:49 - 05:03] And within the HTML file, we can create a div. And then we're going to create an ngIf condition that says ngIf sets data, which is, of course, a signal.

[05:04 - 05:08] And within this div, we're going to create a text called. Hello.

[05:09 - 05:12] And then we need to create a button. So I'm going to create a button.

[05:13 - 05:23] And within this button, I'm going to type in show and hide. And then we pass in the function using the click event handler in angular.

[05:24 - 05:32] And then we need to call the function we created in our TypeScript file, paste it in here. And then we can now save everything we've done so far.

[05:33 - 05:37] So to test it out, we know the initial value is false. So nothing is showing on the page.

[05:38 - 05:45] So if I toggle the button, you can see we get to see hello. If I click on the button again, it sets it to false.

[05:46 - 06:00] So with the sets method, we're able to create a toggle that also either show a particular text or hide a text, depending on the state of the signal. Next up, I would like to look into the updates method in the Writable signal .

[06:01 - 06:07] So in the update method, we're going to create a new variable called counts. So I'm going to type in counts.

[06:08 - 06:14] And then I'm going to initialize this signal. And it's going to take in a value of one.

[06:15 - 06:24] Remember signals are able to take in generic type. So I can just pass in a number here, to signify the variable I defined as the initial value for our signal.

[06:25 - 06:49] So if I scroll to the bottom, I can then create a new method called update(). And within this method or function, I can say this dot counts, dot update(), then we open a bracket and define a parentheses with the value of W pass in a fat arrow and then passing W multiplied by the number of two.

[06:50 - 07:17] What we're trying to do is to create a button that multiplies this initial value by two every time the button is clicked, so to complete the implementation for this, we're straight to the HTML file. Within the HTML file, we create a div and within this div, we create a p tag, create a string interpolation and then initialize our signal, which takes in a parentheses.

[07:18 - 07:28] Finally, we create a button called counter and then pass in the function as a click event handler. To be sure we have the right function.

[07:29 - 07:35] I'm going to copy this updates. paste it in the click event handler and then save everything we've done so far .

[07:36 - 07:43] As you can see, the initial value of the count variable is one. Once I click on the counter button, it gets multiplied by two.

[07:44 - 07:59] So every time we click the button, the number gets multiplied by the value of two. With this, we are able to exemplify the explanation we gave earlier, which says the update method receives and updates the previous value of the signal.

[08:00 - 08:07] This is exactly what is happening in this scenario. Next up, let's look at the compute reactive primitive for the compute.

[08:08 - 08:14] We're going to define an array. So I'm going to scroll up to the page, create a new signal, called data.

[08:15 - 08:26] And then type in random numbers for the array. So let's do that now, we want to do is make use of the reduce method in JavaScript to add up all the numbers in this array.

[08:27 - 08:37] To help us with that we need to make use of computed. So quickly down below, we can just create a public variable called total.

[08:38 - 08:46] And with that, we can now initiate computed. With computed. We can now create a parentheses, create a fat arrow.

[08:47 - 09:03] And then we can now see these dot data, dot reduce(), and then initialize a function, which takes in two arguments. The first one is the accumulator as well as the value.

[09:04 - 09:17] Then we'll open a bracket within the brackets, we return the accumulator and then add it to the value. And then we add an extra argument with a sum of zero.

[09:18 - 09:26] It seems we have an error that says reduce does not exist on type Writable signal. Okay, I think we forgot to initialize our parentheses, which I'm going to do right now.

[09:27 - 09:37] And with that, the error gets cleared. And then we can now save all we've done so far, head to our HTML templates and try to display the signal within a p-tag.

[09:38 - 09:53] So what we need to do is just to call the total signal and then save to see if it gets displayed. As you can see, with the help of the computed, we're able to sum up all the values within the array which adds up to 257.

[09:54 - 10:04] With that, we're able to exemplify the power of computed. Finally, for the reactive primitives in signals, we need to do something on effects.

[10:05 - 10:14] Before we proceed, we need to know that effects can only be defined inside of an injection context. What do I mean by this?

[10:15 - 10:22] It will define effects outside of an injection context. We are going to get an error just like we are right here.

[10:23 - 10:38] You can see the error which says effects, which lacks return type annotation implicitly as an any return type. Also, if we copy and paste this effect inside an ngOnInit() lifecycle hook, we'll still get an error.

[10:39 - 10:51] So one of the major places the effects can work is within the injection context . So what we want to do next, which is define an example in this lesson, is to create and display a chart.

[10:52 - 11:04] I already have the chart js library installed for this project. I'm going to create a variable called charts and then pass in a type of any with an initial array which is empty.

[11:05 - 11:34] So I'm going to paste in a sample of the chart.js library which I got from the chart.js documentation within the effects. As you can see, we hold an instance of the charts variable we defined above by saying this just charts and then we initialize our charts which you can see right here , which has a bunch of default values from January to July as well as data which shows the value of the data within this array.

[11:35 - 11:47] So for now, we can see that the months which are seven does not equate to the number of value of arrays we have. So I'm going to increase the number of values we have to seven.

[11:48 - 12:17] So with this, the data and the value of the labels we have of the same number of length. So to display these charts in the browser, I need to comment everything we've done so far and then create a div and within this div, we can initiate the canvas which needs to have the ID of canvas and then we can call the charts variable within this string interpolation.

[12:18 - 12:31] As you can see, the charts displays successfully on the browser. With that, we've been able to display one of the functions effects is meant to solve as a reactive primitive in signals.

[12:32 - 12:34] And with that, we've come to the end of this lesson.