{"id":606,"date":"2023-03-03T05:00:00","date_gmt":"2023-03-03T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=606"},"modified":"2023-03-01T20:02:33","modified_gmt":"2023-03-02T04:02:33","slug":"rxjs-subjects-when-and-why","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-subjects-when-and-why\/","title":{"rendered":"RxJs Subjects: When and why?"},"content":{"rendered":"\n<p>Our RxJs topic for this week is going to be Subjects. Angular has multiple services and classes (such as <a href=\"https:\/\/blog.angulartraining.com\/5-tips-on-using-angular-formcontrol-710ca338b896\" target=\"_blank\" rel=\"noopener\" title=\"\">FormControl<\/a>) that give us access to Observables that we can subscribe to. But <strong>what if we want to create our own Observable<\/strong> to emit data?<\/p>\n\n\n\n<p>While there is an <a href=\"https:\/\/rxjs.dev\/guide\/observable\" target=\"_blank\" rel=\"noopener\" title=\"\">Observable constructor<\/a> and Observable creation functions such as <a href=\"https:\/\/rxjs.dev\/api\/index\/function\/of\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>of<\/code><\/a> and <code><a href=\"https:\/\/rxjs.dev\/api\/index\/function\/from\" target=\"_blank\" rel=\"noopener\" title=\"\">from<\/a><\/code>, none of these solutions are as powerful and feature-complete as using a <code>Subject<\/code>.<\/p>\n\n\n\n<p>Why is that? Because Subjects check a lot of boxes for us:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>They are multicast, which means they support multiple subscribers out of the box (an Observable does not by default)<\/li>\n\n\n\n<li>They can replay values to new subscribers (<code><a href=\"https:\/\/blog.angulartraining.com\/rxjs-subjects-a-tutorial-4dcce0e9637f#:~:text=Behavior%20Subjects,of%20behavior%20subjects!\" target=\"_blank\" rel=\"noopener\" title=\"\">BehaviorSubject<\/a><\/code> and <code><a href=\"https:\/\/blog.angulartraining.com\/rxjs-subjects-a-tutorial-4dcce0e9637f#:~:text=Replay%20Subjects,to%20new%20subscribers.\" target=\"_blank\" rel=\"noopener\" title=\"\">ReplaySubject<\/a><\/code> do that)<\/li>\n<\/ul>\n\n\n\n<p>Those two features are critical when building Angular apps because our data is usually handled by services, then consumed by components. For example, suppose a service fetches some data (say, the user session info upon login). In that case, it is essential for components that will be displayed later on the screen to subscribe to that information and get the current session info right away (that&#8217;s why replayability\/caching the latest value is critical).<\/p>\n\n\n\n<p>As a plus, the Subject API is incredibly straightforward:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image.png\" alt=\"\" class=\"wp-image-607\" width=\"601\" height=\"149\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image.png 840w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-300x74.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-768x190.png 768w\" sizes=\"auto, (max-width: 601px) 100vw, 601px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>So we have complete control over what we emit, when, and how. All with a single method: <code>.next()<\/code><\/p>\n\n\n\n<p>And since a <code>Subject<\/code> is a specific type of <code>Observable<\/code>, you can subscribe to it the same way: <code>subject.subscribe()<\/code>. That said, it is a best practice to expose the subject as an <code>Observable<\/code> by using the <code>asObservable()<\/code> method as illustrated here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-2-1024x248.png\" alt=\"\" class=\"wp-image-609\" width=\"617\" height=\"149\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-2-1024x248.png 1024w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-2-300x73.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-2-768x186.png 768w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-2.png 1040w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>For more details on how to use Subjects and what are the different types of Subjects, feel free to head to my <a href=\"https:\/\/blog.angulartraining.com\/rxjs-subjects-a-tutorial-4dcce0e9637f\" target=\"_blank\" rel=\"noopener\" title=\"\">RxJs subjects tutorial<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our RxJs topic for this week is going to be Subjects. Angular has multiple services and classes (such as FormControl) that give us access to Observables that we can subscribe to. But what if we want to create our own Observable to emit data? While there is an Observable constructor and Observable creation functions such [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,24],"tags":[],"class_list":["post-606","post","type-post","status-publish","format-standard","hentry","category-rxjs","category-subjects"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/606","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=606"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/606\/revisions"}],"predecessor-version":[{"id":611,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/606\/revisions\/611"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}