The Concept of Signals

[00:00 - 02:17] Hello everyone, welcome to the module 2 of the build a modern angular application with signal's course. In the previous module, we were able to cover the prerequisites to get started with this course. We were also able to look at the project demo as well as the project architecture we used to build the projects we intend to teach for this course. For this module, we would be getting started with signals. In this module, we get introduced to the concept of signals in angular and why is relevant to the angular ecosystem. We will also cover the importance of signals and the problems signals intend to solve in terms of performance and reducing the complexity of writing an angular application. And with that, let's get started with the rest of the lessons in this module. To get started with this lesson, I'll like us to quickly look at the domain of signals. According to the angular website, a signal is a wrapper around the value that notifies interested consumers when that value changes. Signals can contain any value from simple primitives to complex data structures. You need a signals value by calling its get a function which allows angular to track where the signal is used. We'll look into more of this as we progress with this module. But for now, I want us to take a closer look and compare and contrast between RxJS, Observables, and Signals. When it comes to settings, data and signals, signals make it easily accessible in every level of an angular application. Compared to Observables, which requires a certain level of complexity to share data between different components, we are able to emphasize the need for the introduction of signals, which helps to resolve the issue of complexity, and reduces the steep learning curve. Because when you look at RxJS Observables, Observables have so many operators that it would be very difficult for someone coming from a JavaScript background who hasn't touched any framework or library , we will wrap their head around the different RxJS operators which I think is about over 100 different operators. So, the steep learning curve that comes along with learning angular making use of Observables is what signals has come to simplify.

[02:18 - 02:52] To proceed with this, I would like us to take a look at a code example that compares signals to Observables, by creating a counter-operation in Visual Studio Code. Now that we are inside of Visual Studio Code, before we get started, I just want to quickly explain this setting we currently have. So, we have a new angular project, and inside of this angular project, we have a component called RxJS-signals. This component has a template with a text of hello world which is reflected in the browser on the tab on the right hand side.

[02:53 - 03:27] We are able to display the text on the browser because we imported the tag for that template inside our app.component.html file. Nothing difficult, I think that's totally clear, and with that we can now start our implementation of our counter-operation to help us to compare our states it's been set making use of RxJS Observables in comparison with signals. So, if for the first implementation we are going to make use of RxJS Observables as well as Behavior Subject. So, to do that we need to import Behavior Subject and take.

[03:28 - 05:15] So, we can just import that above as you can see and down below we can create a variable called count which also has a pound sign or a dollar sign rather and then we can assign it to the new Behavior Subject and set the initial value to zero. Next thing we do we create our function. So, we're going to call this function counter and within this function we're going to create a new variable called latest counts. We set the initial value to zero and then we're going to instantiate our count variable which also have behavior subjects above by saying this. dots counts with the dollar sign and then we make use of the pipe and then make use of take which is going to be one and then we need to subscribe to this Observable then we call an arrow function which has a variable of X and then assign latest counts and sets it equals to X then below. The final thing we need to do is to call next by initiating the this.count variable once more and then calling dot next() and then we can now say latest counts plus one. With this function we should be able to create a counter operation that increments the value of our counts variable. So, to see this in action we're going to write our HTML file and then get rid of the hello world text and we'll create a div and within this div we're going to create the text called counts and make use of string interpolation and then instantiate our counts variable defined in our TS file and pass an async pipe to be able to display the value of the observable in the browser.

[05:17 - 08:20] Another thing we want to do is to create the button so I'm going to type in button and this button is going to hold the counts function so I'm just going to say click which is the click events handler and then I'm going to call the counter function and then let's call the text counter so I'm going to save everything we've done so far and wait for the browser to refresh. As you can see we have a button called counter with counts holding initial value of zero if I click on the counter button you can see the value increases to one and then it keeps increasing as I click on the counter. So the next number to do is to comment everything in the templates as well as what we have in our TS file and try to implement this making use of signals. To do this we signals the first thing we need to do is to define a variable so we can do that by saying count is equals to signal and signal is nothing but a function, which takes an initial variable. So the initial variable just like we did in the observable we set it to zero and then the next thing is to create the counter function but before we proceed you can see we have an error which says cannot find name signal this is because we need to import signal from @angular/core so I'm going to import signal and then that arrow disappears so we can proceed to create an arrow function by typing counter and then we need the counter function I can just say this.count.update() which is the method available when we define a signal more information will be provided about this in the coming lessons for this module but for now let's just implement our callback by saying that's an arrow function and then typing c plus one so we can now save and then in the templates we can display the variable we set in our TypeScript by creating a div once more and within this div we can just say counts make use of string interpolation and then call our counts variable and it's going to o the parentheses because signal is not in body function finally you can now define our button by creating a button tag, pass in a counter text as well as the click event handler which helps us to call our counter function defined in our TS file so we can now save and then on the browser we can see the initial value is zero so once again if I click on the button you can see its increments by one just like we defined it in the TS file and as you can see the advantages of signals over our address is glaring you don't need to subscribe you don't need to pass an async pipe. The code syntax is elegant and simplistic in nature I think with that we've been able to exemplify the concepts of why signals is introduced into the angular ecosystem in the In the next lesson, we're going to look at the importance of signals over change detection.