{"id":2004,"date":"2024-03-06T08:00:00","date_gmt":"2024-03-06T16:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2004"},"modified":"2024-03-05T15:49:51","modified_gmt":"2024-03-05T23:49:51","slug":"code-challenge-3-rxjs-wizardry","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/code-challenge-3-rxjs-wizardry\/","title":{"rendered":"Code challenge #3: RxJs Wizardry"},"content":{"rendered":"\n<p>It&#8217;s been a few months since our last code challenge, where the goal is to have you look at some code that isn&#8217;t working and make you improve your Angular skills along the way. <\/p>\n\n\n\n<p>In this code challenge #3, we have two <code>select<\/code> dropdowns that have to work together so that when we select a continent, we can only see countries from that continent in the second dropdown. The current code isn&#8217;t working &#8211; Argentina isn&#8217;t in Europe, so this selection should not be possible:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"352\" height=\"195\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2024\/03\/image.png\" alt=\"\" class=\"wp-image-2006\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2024\/03\/image.png 352w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2024\/03\/image-300x166.png 300w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>You can <a href=\"https:\/\/stackblitz.com\/edit\/at-rxjs-demo3?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html\" target=\"_blank\" rel=\"noopener\" title=\"\">fork that code from Stackblitz here<\/a>. Feel free to email me your solution once you have one ready. I&#8217;ll send you a possible solution in next week&#8217;s newsletter.<\/p>\n\n\n\n<p>In case you missed my previous code challenges, here they are, along with the link to their respective solutions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/code-challenge-2-di-or-not-di\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Code challenge #2: DI or not DI?<\/a> (<a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/code-challenge-2-solution\/\" target=\"_blank\" rel=\"noopener\" title=\"\">solution<\/a>)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/code-challenge-1-sharereplay\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Code challenge #1: shareReplay<\/a> (<a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/sharereplay-code-challenge-1-solution\/\" target=\"_blank\" rel=\"noopener\" title=\"\">solution<\/a>)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s been a few months since our last code challenge, where the goal is to have you look at some code that isn&#8217;t working and make you improve your Angular skills along the way. In this code challenge #3, we have two select dropdowns that have to work together so that when we select a [&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,40,12,10],"tags":[],"class_list":["post-2004","post","type-post","status-publish","format-standard","hentry","category-angular","category-code-challenge","category-operators","category-rxjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2004","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=2004"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2004\/revisions"}],"predecessor-version":[{"id":2008,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2004\/revisions\/2008"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}