How to Create a Signal

In this lesson, you will learn how to create our first Signals variable in Angular. You get to see how easy it is to declare variables compared to doing it with Observables which has a more robust boilerplate code.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:25] In the first lesson of this module, while trying to exemplify the concept of signals, we're able to declare our first signal when we were trying to differentiate the syntax of signals in comparison to RxJS observables. In this lesson, we'll be able to go in depth and to how to properly create signals and the different data types are acceptable by signals.

  • [00:26 - 00:40] As you can see, within the components called, how-to-create-a-signal, I'm going to paste the following signal variables. As you can see in our Visual Studio Code, the first signal is called name and it takes in a string as a data type.

  • [00:41 - 01:05] If we want to assess this name variable right here, all we need to do is to head straight to templates, create a tag, and then create a string interpolation and then access it by calling the name variable and attaching a parenthesis to it because signals are functions. So if I save everything we've done so far, you can see the name Dave in the browser.

  • [01:06 - 01:13] So we head back to our TS file. We can also see the next variable we defined here, which is a number.

  • [01:14 - 01:24] So the first variable we can see defined here is a string. Signals can also access numbers and it's also accessible the same way we assessed the first variable called name.

  • [01:25 - 01:36] The next variable we have here is a Boolean, which is set to true. The second variable is also a Boolean, which is set to false, which are all acceptable data types in signals.

  • [01:37 - 01:47] Next up, we pass in null as a data type, as well as undefined, as we can see right here. Another set of data type, acceptable by signals are arrays.

  • [01:48 - 02:01] As can see, we're able to define an array with the string a, b, and c. Right below that, we have signals accepting objects as initial values, which is totally possible with signals.

  • [02:02 - 02:10] Moving on, we can see we can also pass in nested arrays into a signals. As we can see how deeply nested this array is.

  • [02:11 - 02:20] Yet, we don't get any error from signals because it's totally acceptable, just like nested arrays. Nested objects are also acceptable with signals.

  • [02:21 - 02:33] As you can see, we have a deeply nested object, perfectly acceptable by signals. If I scroll to the last variable, which is called profile, you can see that signals is able to accept generic types.

  • [02:34 - 02:52] This generic type called person, is defined above, as you can see, and it accepts a type of string. If I scroll back to the bottom of the page, you can see we're able to define the variable called name, accepts the string code Johns.

  • [02:53 - 03:03] To display this signal in our templates, all you need to do is just to call the profile variable, just like we did. But this time around, we need to pass in the name, which is within the object.

  • [03:04 - 03:16] So that would be profile dot name. And when I save, and once the browser refreshes, we're able to assess the value within that object, as you can see right here.

  • [03:17 - 03:31] So in this lesson, we've been able to see that we can define signals using different data types ranging from strings to numbers to arrays, objects, and much more. We can now move on to the next lesson.