{"id":2153,"date":"2024-08-29T14:52:27","date_gmt":"2024-08-29T21:52:27","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2153"},"modified":"2024-08-29T14:52:35","modified_gmt":"2024-08-29T21:52:35","slug":"how-to-use-tosignal-outside-of-an-injection-context","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-use-tosignal-outside-of-an-injection-context\/","title":{"rendered":"How to use toSignal() outside of an injection context?"},"content":{"rendered":"\n

If you’ve ever tried to convert an Observable into a Signal using the toSignal() function<\/a>, you might have encountered the following error NG0203: toSignal() can only be used within an injection context<\/strong>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This happens when you create an Observable outside of an injection context<\/a>, which can happen if you want to download data when the user clicks on a button, for instance:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Can we make this work? Absolutely! The key is to access our injector and store it in a variable so we can pass it as a parameter to toSignal()<\/code>. How to do that?<\/p>\n\n\n\n

Interestingly enough, we can access our injector by… injecting it into our component:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Then, we pass it as an option to the toSignal()<\/code> function:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And that’s it, problem solved! You can see the full code example on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

If you’ve ever tried to convert an Observable into a Signal using the toSignal() function, you might have encountered the following error NG0203: toSignal() can only be used within an injection context: This happens when you create an Observable outside of an injection context, which can happen if you want to download data when the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,10,29],"tags":[],"class_list":["post-2153","post","type-post","status-publish","format-standard","hentry","category-angular","category-rxjs","category-signals"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2153"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2153\/revisions"}],"predecessor-version":[{"id":2159,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2153\/revisions\/2159"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}