{"id":908,"date":"2023-05-05T05:00:00","date_gmt":"2023-05-05T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=908"},"modified":"2023-05-04T14:45:33","modified_gmt":"2023-05-04T21:45:33","slug":"rxjs-concatwith-operator","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-concatwith-operator\/","title":{"rendered":"RxJs concatWith operator"},"content":{"rendered":"\n<p>Our operator of the week is <code><a href=\"https:\/\/rxjs.dev\/api\/operators\/concatWith\" target=\"_blank\" rel=\"noopener\" title=\"\">concatWith<\/a><\/code> (the new name for <code>concat<\/code> since RxJS v7). This operator takes any number of Observables, subscribes to them one after the other, in sequence, and then returns the values emitted by the first Observable, then the second one, then the third one, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1003\" height=\"426\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-4.png\" alt=\"\" class=\"wp-image-909\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-4.png 1003w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-4-300x127.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-4-768x326.png 768w\" sizes=\"auto, (max-width: 1003px) 100vw, 1003px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Unlike <code><a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-forkjoin-operator\/\" target=\"_blank\" rel=\"noopener\" title=\"\">forkJoin<\/a><\/code>, which runs these Observables in parallel, <code>concatWith<\/code> runs them one after the other and waits for the completion of an Observable before subscribing to the next one.<\/p>\n\n\n\n<p>As a result, <code>concatWith<\/code> can be used when:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We need to make multiple HTTP requests in a specific order, one after the other.<\/li>\n\n\n\n<li>We need to combine user input with server data. For instance, we let the user select multiple filters in the UI, and when the user is done, we trigger an HTTP request to the server.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our operator of the week is concatWith (the new name for concat since RxJS v7). This operator takes any number of Observables, subscribes to them one after the other, in sequence, and then returns the values emitted by the first Observable, then the second one, then the third one, etc. Unlike forkJoin, which runs these [&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-908","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\/908","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=908"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/908\/revisions"}],"predecessor-version":[{"id":912,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/908\/revisions\/912"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}