Turn an RxJS Observable Into an Angular Signal With toSignal
The toSignal function in Angular enables the conversion of an RxJS observable into a signal.
It allows you to wrap an observable and handle the initial value of the resulting signal. You can explicitly define the initial value, require a synchronous emission from the observable, and more!
[00:00] Create a new property and use the 2 signal function which we first need to import from Angular slash core slash RX JS interrupt. The 2 signal function accepts an RX JS observable. And in our case, this is going to be the chosen item observable, which I [00:19] have created in the meantime, a subject that represents a chosen item by the type of the item's ID, which is a number. Here in the list, when we click the item, which is basically clicking either Dan or Elia, the chosen item subject emits the value, which is the ID of the [00:39] item. So when we click Dan, ID 1 gets submitted. When we click Elia ID 2 gets emitted. The 2 signal grabs the observable, and it subscribes to the observable. And whenever any value within the observable gets emitted, the signal also changes its current value. But as we can see [00:59] from the types, there is not only a number, but there is also undefined. And that's because a signal always needs to have a value. And in case of observables, we are not guaranteed that an observable would emit immediately any existing item at the very beginning. So there are a couple of [01:19] ways which we can deal with that. So the default way is that there are no additional parameters passed to to signal and the type of the signal is going to be extended with undefined. Another option is that we will pass a configuration option to to signal and we can explicitly define what is [01:39] the initial value. So in our case, that could be, for instance, just 1. So let's see what is the difference between the chosen ID which is displayed by the observable, which we can see over here, and what would be the chosen ID as a signal. And in this case, that would be basically [01:59] running the chosen item as a function. This is our signal. So we can see that the signal value has the initial value, which is 1, and the chosen ID, which is the observable version, doesn't emit any values yet. So in this case, if we have just the initial value, which [02:19] is a number, we can see that undefined is gone. So this is the second option. There is also one more option that we can use that require sync property, which requires that the observable that we are wrapping over here, we're expecting that it would immediately [02:39] emit a value or that we require that would be a synchronous emission. Now since this is a subject, we cannot guarantee that there would be a initial value being emitted by this observable. So if this was a behavior subject that we would pass an initial value, this would be true [02:59] since a behavior subject does have an initial value guaranteed. However, if since this is just a subject, we can see that there is an error being thrown. 2 signal called with require sync but observable did not call synchronously. So there is a still couple of interesting properties that we can take a look at the [03:19] options of the 2 signal function. We have also the injector and the manual cleanup. 2 signal internally doesn't run an effect, but both options, that is manual cleanup and the injector are used the same way by both to signal and effect.