Using toSignal and toObservable for RxJS interop

[@davidjustice2323]

Thanks Deborah for the hard work to deliver the info for us. I appreciate that 😍

[@deborah_kurata]

Happy to share. Thanks!

[@erfanfarhadi]

Thank you for generously sharing your vast knowledge 🙏. It is completely clear that true information matters to you 💯.

[@deborah_kurata]

Thank you for watching. And I try. :-) I wish there was a way to update content posted to YT as the technology (or best practices) change . But no. The best we can do is publish a new video covering the changes.

[@chagamajaykumarreddy1897]

Hi Deborah, thank you so much for covering the error handling. looking forward to more awesom videos in latest angular tips and tricks to solve complex problems. thank you so much for awesom video.

[@deborah_kurata]

Some of the other error handling features are cool as well. Hoping to get that video pulled together soon. Thank you! 🙏

[@presDev]

usefull as always! thanks Deborah!

[@deborah_kurata]

Glad to hear that it was useful. Thanks! 🙏

[@praku78]

Hi Deborah, Thanks for the excellent video 🙂. I have doubt, can we use signal inside route gaurd? I tried to use a signal variable eg: this.showUserAccess.set(true); inside canActivate() and trying to use it in another component and its not getting updated, I am using Angular 18.0, let me know whether its right way to use it.

[@estuardohernandez4230]

As usual, your videos are so helpful.

[@deborah_kurata]

Glad to hear that. Thank you! 🙏

[@juanfalcon9507]

Thanks Deborah for the job!

[@deborah_kurata]

Thank you for watching!

[@davoodsoleimani9482]

Hey! Thank you. But In the case of using try-catch, is it not possible to handle the errors in the catchError? I think that we can return an empty array instead of error object in the catchError and so no need to use try-catch!

[@sarathlalsaseendran]

Wonderful video as usual

[@deborah_kurata]

Thank you so much 😀

[@afshin7104]

Hi Deborah Thanks for the clear explanation of the signal but what if you wanted to have a vehicle-add components to add vehicle to the signal or even edit the vehicle?

[@deborah_kurata]

Glad to hear it was useful. To define an updatable signal that was originally created with an observable, you can do something like this: userTasks = signal([]); private userTasks$ = this.http.get(this.todoUrl + 1).pipe( tap(tasks => this.userTasks.set(tasks)) ); Create a writable signal, then in the pipeline of the Observable, set the data from the Observable to the writable signal. The downside of this approach is that something needs to subscribe (and unsubscribe) to userTasks$. I'm still hoping for an easier way to create an updatable signal from an observable as more signal features are added to Angular.

[@afshin7104]

@@deborah_kurata so if I am suppose to manually subscribe and unsubscribe then what's the point of creating additional signal inside the service we can achieve the same functionality with subject or behaver subject and in real world every data come's from some sort of http request and we list them in some sort of grid , and we edit line without going back to server to request the whole data I am getting confused

[@deborah_kurata]

The ultimate goal with signals is to get much better change detection in the user interface to improve performance. Using your example, currently if you have a grid of data and update one of the rows, the entire grid is seen as changed and redisplayed. With signals, the goal is to have much more fine grained change detection such that modifying a single row will only re-render that row. But a few things: 1) Signals are not yet finished. 2) As you've found, there is no easy way to modify a signal if the data comes from an HTTP request. (Hopefully this will become easier.) 3) The UI benefits are not yet fully in place. 4) Signals don't yet support input properties. 5) Signals don't yet support two way binding So, currently, there are still benefits to start moving toward signals for managing state: the reactivity of computed properties and improved changed detection (currently using OnPush). We'll see more benefits as more signal features are implemented.

[@afshin7104]

@@deborah_kurata Thank you Deborah for your detailed clarification on this matter hopefully other viewers see our discutients and become clear about benefits and limitations I wish you could create a video to show getting product-list from http select the product go to edit page update product click back and go to the list without fetching the data from http

[@mrbrightsidee5364]

How do you re initialize the value of the toSignal? I mean if we have a component which is printing some information by using the value we are getting from a toObservable and then passed to a toSignal, when you select another element, first you see the last thing you got from the Observable, and after that you see the new data, how do you clean up the toSignal o re start the initialValue

[@deborah_kurata]

Have you seen the new resource/rxResource? If I understand you correctly, those new features may better suit your needs. kzbin.info/www/bejne/lXzcdKCmgtGJisU

[@g-luu]

Nice and simple explanation. Just hope they could find another way of handling errors cause try catch gives me nightmares

[@deborah_kurata]

Thanks! They do ... but it takes a bit more to explain fully. I'm planning on doing another video just on error handling in the near future.

[@MrMagrok]

Hi Deborah, fantastic tutorial! I tried to implement toSignal in my application, but I´ve got errors with my Interceptor. I intercept every outgoing request and attach from my ngXS store some User Data. Non-Signal requests are working fine, but when I try to use ToSignal, the value from the store cant be attached. Do you have any idea why?

[@deborah_kurata]

Thank you for the kind words about the video. I've not worked with ngXS, so I don't know enough to answer your question. Consider reaching out to the makers of ngXS and see if they can help you.

[@MrMagrok]

@@deborah_kurata Thank you for your answer, deborah! It means a lot :) I got a workaorund and got my values from local Storage and now my Interceptor works just fine. Now I am trying to fix the rest of my code. It just looks so easy in your example, but I struggle sometimes. Maybe I need to step back for a moment and clear my mind.

[@deborah_kurata]

Yes, stepping back often does help. And there are a few "holes" in signals yet at this point, so that can make it challenging.

[@JoaoOrtiz-fj1pj]

Hello Deborah i have a question to u, for example i have this signal animalsSignal = toSignal(this.getAnimals(10,0, filters)) and filters are a object with 3 filter props and user can set value of this filters my problam is when user set filters diferent my signal will be update? or how can i do this update?

[@deborah_kurata]

I assume getAnimals is an HTTP request? If so, it is one and done. It will only update the signal one time, when the data is first retrieved. It won't emit again, so the signal won't change again.

[@deborah_kurata]

If you could put together a SMALL stackblitz example with your scenario (NOT your entire application), I would be happy to take a look and propose a solution for you.

[@JoaoOrtiz-fj1pj]

@@deborah_kurata yoo deborah all good you solved my question, have a good day :)

[@TheZukkino]

I've noticed a strange behaviour on error management. You approach works properly if are not required mutable signals. In case of mutable signals, I've created in the service, as shown in one of your video, the readOnly version and mutable version assigning its value through pipe operation from the remote API call Observable. The unmanagable behaviour appears when I create the local signal in the component. If, in the computed operation, the readOnly signal is assigned to the local component signal, the error is correctly caught, but any change is not detected (cause of readOnly). On the other case, if I assign the mutable signal, the changes are correctly detected but the errors are uncaught. How can I approach to this scenario?

[@vamshikunuguntla7626]

Great explanation!!

[@deborah_kurata]

Thank you!

[@soromiso]

Thanks, it helps me to understand how to use signal, it looks like React useEffect look usage. 😮

[@deborah_kurata]

Glad it was helpful! Thank you!

[@syedakbar5099]

Wish there's a video about how signal impacts NgRx

[@deborah_kurata]

The NgRx team has been working on articles and videos: dev.to/ngrx/announcing-ngrx-v16-integration-with-angular-signals-functional-effects-standalone-schematics-and-more-5gk6 kzbin.info/www/bejne/g6TFgZ6AjtepbJo&pp=ygUMbmdyeCBzaWduYWxz And I'll add it to my list of possible future topics. Thanks for the suggestion!

[@NishvanthD]

while using toObservable should i use takeUnitlDestroy or it it will automatically unsubscribe ??

[@deborah_kurata]

My understanding is that toObservable must be defined within an injection context. I assumed it would then complete the Observable when that context is destroyed. But I was not able to find any documentation to back up this understanding. Nor have I experimented with it. So, bottom line, I don't know for certain the answer to your question. 😊

[@NishvanthD]

@@deborah_kurata Thanks for the reply

[@Wadih-bc]

Thank you!

[@deborah_kurata]

Thank you for watching! 😊

[@respostasimples]

you are awesome! thanks for the explanation!

[@deborah_kurata]

You are most welcome! Thank you for the kind words! 🙏

[@ayoubelhayat9650]

Awesome 🙌🏻

[@deborah_kurata]

Thanks 🤗

[@souhaibkhadraoui9898]

Thanks again for the great content, I am really enjoying these short videos packed with hands-on knowledge !! Usually when learning JS some of us are taught that setting a value to undefined is a "bad practice". Why is undefined allowed here for Signals ? (PS I have now seen multiple videos that set the signal values to undefined and was wondering)

[@deborah_kurata]

Great to hear that you are enjoying the videos! From the MDN docs: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined "A variable that has not been assigned a value is of type undefined. A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not returned." It's the last sentence there that makes sense in this case. Until the Observable emits, the signal has no value. So it makes sense that it reads as "undefined". Also, *our* code doesn't set the value to undefined. The signal default is set to undefined (just like a declaring a variable with no assigned value). var x; // x is undefined vehicles = toSignal(this.vehicles$); // before the observable emits, vehicles is undefined Was that helpful?

[@souhaibkhadraoui9898]

@@deborah_kurata Yes, it makes sense now that you put it in context with Signals !! (as you explained we are not setting a value, simply letting future readers of that signal know that it has no value yet) Thanks !!