Access the Angular toSignal's read-only result as a writable signal!

We can use toSignal to automatically subscribe to an HTTP get request and retrieve data. Cool! But you end up with a read-only signal.
In this video, we examine a technique for storing a writable signal within a read-only signal so the retrieved data can be updated.
NOTE: This technique was presented to me by Alex Rickabaugh from the Angular team, who approved this post.
*Links*
KZbin video "Angular Signals: What? Why? and How?": kzbin.info/www/bejne/paK8gnpthrKXsNk
KZbin video "Using toSignal and toObservable for RxJS interop": kzbin.info/www/bejne/roKsgIqhd8porbM
Code - Signal within a Signal: stackblitz.com/~/edit/signal-within-signal-deborahk
Code - Signal within a Signal with Services: stackblitz.com/~/edit/signal-within-signal-service-deborahk
*Content*
00:00 Access the Angular toSignal's read-only result as a writable signal
00:26 toSignal
01:06 Signal within a signal
03:03 Updating the Signal
03:55 Exposing a read-only signal to the component
05:08 Wrap up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and KZbin content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
View my KZbin content: www.youtube.com/@deborah_kurata
Contact me on Twitter: DeborahKurata
Find my Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angularsignals
#signalsinangular
#angular
#signals
#signaltutorial
#rxjsandsignals
#signalsandrxjs
#angularsignal
#statemanagementinangular
#angularcommunity
#angular17
#angulardeveloper
#reactiveprogramming

[@tomaszlodz82]

Deborah, you made my day. You broke the world record in teaching HTTP GET request with Signals in just 5 minutes! Thank you!

[@deborah_kurata]

Glad it was helpful!

[@haroldpepete]

great, you're one of the my preffer angular's teacher, you do a awesome job teaching about angular

[@deborah_kurata]

Wow, thanks! That's wonderful to hear! 😊

[@MohamedElsayed-se8ze]

Deborah, I just wanted to say a massive thank you for your amazing Angular tutorials! Your videos have been a game-changer for me. I used to struggle with many concepts, but your clear and concise explanations have made all the difference. I now feel much more confident in my Angular skills. Keep up the fantastic work! You're truly an inspiration. 🙌

[@deborah_kurata]

That is so very kind of you to say. Thank you very much! 😊

[@MrMagrok]

Hi Deborah, you just helped me to get a massive jump in my project! The whole day, I tried to get Data from my Backend, display it and change it. And with 5 minutes of your video, I just got the job done! Amazing! Please do not stop making Videos about Angular! You are the real MVP of the Year and the World!! If we ever meet, all hot and cold drinks are on me!

[@deborah_kurata]

That is so kind of you to say. Thanks! 😊

[@jeffnikelson5824]

tbh feels weird having to write double parenthesis and wrapping a read-only singal in a writable signal in a computed signal lol. Anti pattern ?

[@renrenklein_th]

Always love seeing videos on Angular Signals and Control Flow, great explanations as per usual ^_^.

[@deborah_kurata]

Thank you! 😊

[@Yuyayayu872]

I love it. Thank you for sharing this method of working with Signals.

[@deborah_kurata]

😊 It's definitely an interesting and thought-provoking technique. I'd be curious on how well the technique scales. It seems that for a larger application, you're still better off using a state management library of some kind (like signal store).

[@seanszarkowicz2910]

Great video and explanation as always. Just seems like so much overhead to get HTTP data and work with data. Can not wait until RxJS is optional and not needed for HTTP Request!

[@deborah_kurata]

Thank you! Yes, it seems like there should be a much simpler way to do this!

[@TheAdamwest29]

wow! and i was just wondering about this! thank you!

[@deborah_kurata]

Glad it was helpful!

[@EmanuelDulan]

Interesting video, it also asks for a second one about handling the errors in http requests converted to signals.

[@deborah_kurata]

Yeah, I thought this was an interesting technique. But I've been leaning more toward the approach here: kzbin.info/www/bejne/qHm0kmeJpcqel6M And it does a better job of handling errors.

[@raihankhan291]

Big fan of your courses, please get something on pluralsight or KZbin that will be a starter for angular 17 covering topics with a standalone component perspective

[@dinysanchez]

Hi Deborah! Amazing content as usual! Big fan. I'm just wondering will this method still comply with the declarative paradigm?

[@chaos_monster]

what do you think about something along the following line (especially when encapsulated in a service) rawData = toSignal(this.apiCall()); alterData = signal(null); displayData = computed(() => { const rawData = this.rawData(); const alterData = this.alterData(); // do some merging and altering return mergedData; })

[@deborah_kurata]

That seems like it would work. If the raw data is an array of items and the altered data is inserted (new) items, then the suggested code is straightforward. If the altered data could have multiple updates and deletes, then it becomes more complex and prone to error. I wish we had a better/easier solution for this!

[@tiberseptim7183]

Getting writable signal is not what i usually expect from computed.

[@deborah_kurata]

The computed itself is still read-only. It just contains a writable signal. 😊

[@etexalbania7301]

Thank you for the great content, please do some videos or a course on debugging Angular applications. A question for signals, if we have an Angular application like excel spreadsheet with calculations, do you recommend using signals for value changes in the spreadsheet? thank you

[@deborah_kurata]

Thank you! I'll add debugging to my list of future topics. Regarding your question, it's difficult to recommend an approach without more information. In general, Angular is moving toward signals as the primary recommended mechanism for interaction between the component code and the template. So moving to signals follows that path.

[@Giuliano1403]

@deborah_kurata , excellent video, thank you very much! Do you think Angular will bring something less elaborate to facilitate implementation and improve understanding in the next versions?

[@deborah_kurata]

Thank you for the kind words. I most certainly hope so. I'm just not sure which direction they will take. A new `fetch` that doesn't provide an observable? If so, they need *something* else because signals (as they are now) can't handle async operations. A asyncEffect() that should be used to retrieve data? An updated toSignal() that can handle one and done (HTTP) operations? It will be interesting to see where this goes.

[@rkrao8582]

This is amazing. Hey totally off topic , I have a quick question on Angular projects that starts with new signals and rxjs. How would you architect the application to better manage the state. I think for the complex applications writing the logic inside service is not manageable and Isn't it better if we separate or reserve services for just http calls ? And I would prefer a layer between the service and component component where I can perform the actual logic, and the component will only get what should be presented in the view.

[@deborah_kurata]

Thank you! For complex applications, consider using the NgRx Signal store. It cleanly defines and manages state.

[@sravant]

You should do a latest angular series deborah

[@deborah_kurata]

Thank you for your suggestion. I'm considering doing a new Angular v18 "Angular: Getting Started" series here on KZbin. Do you think that would be useful?

[@waelmoh]

@@deborah_kurata Plz do, with some advanced topics ^_^

[@jackiecooper9439]

@@deborah_kurata Please do it, it will be game-changer for people who want to start Angular in 2024!!

[@etexalbania7301]

@@deborah_kurata yes

[@peterholub4375]

Unfortunatelly the patterns exposed in this video aren't going to be very useful in a bigger application where reloading and saving will need to be implemented. Also if you really understand how change detection and effects work dataForDisplay could just be a getter without any negative downsides. Just learn some ngrx/ngxs stuff instead.

[@deborah_kurata]

Using signal store, for example, is the preferred choice for large-scale applications.