Synchronizing Select Boxes with an Angular Signal Effect

Syncing multiple select boxes isn't always easy, especially when they are populated from HTTP requests. In this video, we'll first take a procedural approach to synchronizing select boxes with signals. Then change to a reactive approach, using a signal effect. *Links* Sample code (procedural approach): https://stackblitz.com/~/edit/sync-select-procedural-deborahk Sample code (effect approach): https://stackblitz.com/~/edit/sync-select-effect-deborahk Sample code (Subject approach): https://stackblitz.com/~/edit/sync-select-subject-deborahk Angular Docs: https://angular.dev/guide/signals#effects *Content* 00:00 Syncing multiple select boxes 00:24 Sample Application 01:27 Populating the primary select box with toSignal() 03:15 Syncing the secondary select box (procedural) 07:09 Syncing the secondary select box (signal effect) 09:38 Wrap up *NOTE* The golden rule is to always unsubscribe if you subscribe. Even though the http request is "one and done" and therefore completes, it's a good idea to unsubscribe. I didn't include it in order to keep the video shorter/more focused. But if you look at the sample code (referenced above), you'll see that I use takeUntilDestroyed. And since I have the code in a method (not a constructor), I have to use DestroyRef. ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 😊About Me Hey! I'm Deborah Kurata I'm a software developer and YouTube content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE). View my YouTube content: https://www.youtube.com/@deborah_kurata Contact me on Twitter: https://twitter.com/DeborahKurata Find my Pluralsight courses: https://www.pluralsight.com/profile/author/deborah-kurata Access my freeCodeCamp articles: https://www.freecodecamp.org/news/author/deborah-kurata/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #angulartutorials #angular16tutorial #effectsinangularsignals #dependentselectboxes #angulardependentselectboxes #angularselect #angularsynchronizetwocomboboxes #angularsynchronizetwoselectboxes #angularsynctwocomboboxes #angularsynctwoselectboxes