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-se... Sample code (effect approach): https://stackblitz.com/~/edit/sync-se... Sample code (Subject approach): https://stackblitz.com/~/edit/sync-se... Angular Docs: https://angular.dev/guide/signals#eff... 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:    / @deborah_kurata   Contact me on Twitter:   / deborahkurata   Find my Pluralsight courses: https://www.pluralsight.com/profile/a... Access my freeCodeCamp articles: https://www.freecodecamp.org/news/aut... ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ #angular #angulartutorials #angular16tutorial #effectsinangularsignals #dependentselectboxes #angulardependentselectboxes #angularselect #angularsynchronizetwocomboboxes #angularsynchronizetwoselectboxes #angularsynctwocomboboxes #angularsynctwoselectboxes