{"id":1054,"date":"2023-06-09T05:00:00","date_gmt":"2023-06-09T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1054"},"modified":"2025-01-13T14:35:58","modified_gmt":"2025-01-13T22:35:58","slug":"rxjs-and-signals-interoperability","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-and-signals-interoperability\/","title":{"rendered":"RxJs and Signals interoperability"},"content":{"rendered":"\n

Angular 16<\/a> introduced several features related to the brand-new Angular Signals<\/a>, which include two functions enabling RxJs interoperability.<\/p>\n\n\n\n

toObservable()<\/a><\/h2>\n\n\n\n

The name says it all. toObservable()<\/code> takes a Signal and returns its data as an Observable:<\/p>\n\n\n

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

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

This new Observable gets updated every time the underlying Signal value is updated. We can subscribe to it using the async pipe, for instance (demo code here<\/a>):<\/p>\n\n\n

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

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

toSignal()<\/a><\/h2>\n\n\n\n

toSignal() <\/code>does the opposite of toObservable()<\/code>. It turns an Observable into a Signal. Since Signals are different from Observables (a Signal always has a value right from the start – an Observable does not), the default behavior of toSignal()<\/code> is to return a Signal that supports undefined<\/code> as a default value:<\/p>\n\n\n

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

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

This can be changed by providing an initial value as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"

Angular 16 introduced several features related to the brand-new Angular Signals, which include two functions enabling RxJs interoperability. toObservable() The name says it all. toObservable() takes a Signal and returns its data as an Observable: This new Observable gets updated every time the underlying Signal value is updated. We can subscribe to it using 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-1054","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\/1054","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=1054"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1054\/revisions"}],"predecessor-version":[{"id":2254,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1054\/revisions\/2254"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}