{"id":1255,"date":"2023-07-28T05:00:00","date_gmt":"2023-07-28T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1255"},"modified":"2023-07-27T14:45:28","modified_gmt":"2023-07-27T21:45:28","slug":"combining-multiple-observables-with-ngrxlet","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/combining-multiple-observables-with-ngrxlet\/","title":{"rendered":"Combining multiple Observables with ngrxLet"},"content":{"rendered":"\n<p>Last month, I explained <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/using-a-loading-template-with-ngrxlet\/\" target=\"_blank\" rel=\"noopener\" title=\"\">how to use <code>ngrxLet<\/code> to render a loading template<\/a>. Earlier this year, I also covered <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/ngrxlet-a-better-version-of-the-async-pipe\/\" target=\"_blank\" rel=\"noopener\" title=\"\">how <code>ngrxLet<\/code> can be a great alternative to the <code>async<\/code> pipe<\/a>. All in all, <code><a href=\"https:\/\/ngrx.io\/guide\/component\/let\" target=\"_blank\" rel=\"noopener\" title=\"\">ngrxLet<\/a><\/code> is a fantastic directive that keeps improving.<\/p>\n\n\n\n<p>For instance, we can also use it to combine multiple different Observables into one local variable as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"197\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-42-1024x197.png\" alt=\"\" class=\"wp-image-1256\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-42-1024x197.png 1024w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-42-300x58.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-42-768x148.png 768w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-42-1536x296.png 1536w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-42.png 1714w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Without <code>ngrxLet<\/code>, the equivalent code would have to use the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/one-more-async-pipe-syntax-trick\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>async <\/code>pipe syntax trick<\/a> covered last week:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"197\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-43-1024x197.png\" alt=\"\" class=\"wp-image-1257\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-43-1024x197.png 1024w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-43-300x58.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-43-768x148.png 768w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-43-1536x296.png 1536w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/07\/image-43.png 1714w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>This also works, but it&#8217;s more verbose and has the downside of using ngIf, which is present only because <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/async-pipe-syntax-tricks\/\" target=\"_blank\" rel=\"noopener\" title=\"\">we need a structural directive to enable the local variable assignment micro-syntax<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last month, I explained how to use ngrxLet to render a loading template. Earlier this year, I also covered how ngrxLet can be a great alternative to the async pipe. All in all, ngrxLet is a fantastic directive that keeps improving. For instance, we can also use it to combine multiple different Observables into one [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11,18,10,7],"tags":[],"class_list":["post-1255","post","type-post","status-publish","format-standard","hentry","category-angular","category-directives","category-ngrx","category-rxjs","category-template-syntax"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1255","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=1255"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1255\/revisions"}],"predecessor-version":[{"id":1259,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1255\/revisions\/1259"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}