Synchronizing Select Boxes with an Angular Signal Effect

Опубликовано: 23 Июль 2024
на канале: Deborah Kurata

9,225

475

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