{"id":466,"date":"2023-02-10T05:00:00","date_gmt":"2023-02-10T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=466"},"modified":"2023-02-08T14:50:02","modified_gmt":"2023-02-08T22:50:02","slug":"rxjs-forkjoin-operator","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-forkjoin-operator\/","title":{"rendered":"RxJs forkJoin operator"},"content":{"rendered":"\n<p>Our <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/category\/rxjs\/\" target=\"_blank\" rel=\"noopener\" title=\"\">weekly RxJs operator<\/a> is <code>forkJoin<\/code>. This operator can be applied to any number of Observables. When all these Observables complete, <code>forkJoin<\/code> emits the last value from each one of them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-14.png\" alt=\"\" class=\"wp-image-468\" width=\"789\" height=\"553\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-14.png 790w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-14-300x210.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-14-768x539.png 768w\" sizes=\"auto, (max-width: 789px) 100vw, 789px\" \/><\/figure>\n\n\n\n<p>A common use case for <code>forkJoin<\/code> is when we need to trigger several HTTP requests in <strong>parallel <\/strong>with the <code>HttpClient<\/code> then receive all of the responses at once in an array of responses:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"189\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-15.png\" alt=\"\" class=\"wp-image-469\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-15.png 699w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-15-300x81.png 300w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The critical feature here is that those requests happen <strong>simultaneously<\/strong>, not one after the other (better performance), yet we receive the data when <strong>both have completed<\/strong>, which is convenient.<\/p>\n\n\n\n<p>Another interesting syntax for <code>forkJoin<\/code> is to pass an object instead of an array as follows:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"761\" height=\"188\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-16.png\" alt=\"\" class=\"wp-image-470\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-16.png 761w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-16-300x74.png 300w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Here is a <a href=\"https:\/\/stackblitz.com\/edit\/at-forkjoin?file=src%2Fmain.ts,src%2Ftypes.ts\" target=\"_blank\" rel=\"noopener\" title=\"\">complete example of <code>forkJoin<\/code> in action<\/a>. <\/p>\n\n\n\n<p>As a reminder, my 2-hour&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=nQrMgNIvqxM\" target=\"_blank\" rel=\"noreferrer noopener\">RxJS workshop from ng-conf 2022<\/a>&nbsp;is also available on Youtube for free!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our weekly RxJs operator is forkJoin. This operator can be applied to any number of Observables. When all these Observables complete, forkJoin emits the last value from each one of them. A common use case for forkJoin is when we need to trigger several HTTP requests in parallel with the HttpClient then receive all of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,10],"tags":[],"class_list":["post-466","post","type-post","status-publish","format-standard","hentry","category-operators","category-rxjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/466","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=466"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/466\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/466\/revisions\/474"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}