Synchronizing Select Boxes with an Angular Signal Effect

[@itamarmonteiro3066]

Thanks for sharing Deborah!

[@deborah_kurata]

Thank you for watching! 😀

[@developers4259]

Thanks to your videos I have improved as a developer, it has helped me a lot to learn about angular, your explanations are very clear and concise. You are a great teacher! Thank you so much! :D

[@deborah_kurata]

So great to hear that the videos have been useful. Thank you for the kind words. 😊

[@vivmaniaa]

Thank you Deborah, it's always good to see you in my youtube. Excited for the next one! my god bless you!

[@deborah_kurata]

You made me smile this morning! Thank you so much! 😊

[@НикитаКлусович]

Thank u for this video. It is a miracle as usual. I think that it is a very convenient approach during the development phase but from my point of view it decreases readability because the reactive approach makes code less obvious and predictable.

[@deborah_kurata]

Thank you for watching! Yeah, that's why I showed two different ways. (Three if you count the extra sample code. 😊) Each technique has its benefits and weaknesses. The procedural approach in this example was definitely more straightforward, though perhaps less flexible as the application grows with more features.

[@НикитаКлусович]

@@deborah_kurata I am 100 percent agree))

[@themovielookout]

Thanks for sharing!

[@deborah_kurata]

Thank you for watching!

[@DemystifyFrontend]

You are too good and inspiring me to create quality content

[@deborah_kurata]

😊

[@Brendan2Alexander]

Very helpful Deborah thank u!

[@deborah_kurata]

Glad it was helpful! Thank you!

[@terizo1039]

Great Video, but instead of effect and subject from rxjs you can just use toObservable to change signal to observable and filter empty value 😊

[@test-user-123]

Спасибо, все понятно и только нужные знания Tnx 😊

[@deborah_kurata]

That is wonderful to hear. Thank you very much. 😊

[@nurik93sat]

Avoid using effects for the propagation of state changes. This can result in ExpressionChangedAfterItHasBeenChecked errors, infinite circular updates, or unnecessary change detection cycles. Angular docs says it. Am I wrong confuse?

[@deborah_kurata]

Yep! I talk to that later in the video: kzbin.info/www/bejne/ipisg3-fia2tmZo

[@nurik93sat]

@@deborah_kurataThanks

[@christianhalaby832]

Couldnt we directly create an effect based on the changes of the first signal and directly calling the request instead of creating. multiple other signals ... Ill need to think about this

[@deborah_kurata]

If you are referring to the Todos, that wouldn't work as I have it written. When the user selects a person from the list, that doesn't modify the Todos. We need to react to the change in the selected team member, so need a signal that specifically tracks that Id. We can then write an effect that reacts to changes in the id. Or did I misunderstand what you were suggesting?

[@prasoon2510]

I am doing the same way in my project, But if I use multiple signals in one effect then if any of those signals updated, my effects is getting triggered..

[@deborah_kurata]

You can use untracked. I've planned to do a video on untracked, but haven't gotten it finished yet. Here is an article that may be useful: blog.angulartraining.com/whats-the-untracked-function-angular-signals-c08d28b92d57

[@richarddefortune1329]

Thanks for another great video. I suppose that using effect() with signal this way is the equivalent of subscribing to an observable inside OnInit() life cycle hook.

[@deborah_kurata]

Thank you! For a non-parameterized query you are right. If we're talking about this exact scenario, then not quite because of the parameterized query. See this additional set of sample code for the same scenario done with a Subject: stackblitz.com/~/edit/sync-select-subject-deborahk

[@informer9261]

Can u make an video for how to make api call and display using ngrx signal store

[@deborah_kurata]

Yes! Ngrx signal store is on my list of potential future topics.

[@bonnes04]

Great Video, Very useful... can you add loading while fetching data

[@deborah_kurata]

Thank you! If I understand correctly, I show one way to do that here: kzbin.info/www/bejne/qHm0kmeJpcqel6M Here is another way: stackblitz.com/~/edit/sync-select-procedural-loading-deborahk

[@timeimp]

Ohh, right, you don't have to explicitly unsubscribe because you're in a HTTP context. Nice!

[@deborah_kurata]

I may have decided poorly. 😄I opted not to get into showing the unsubscribe because I didn't want to take away from the key topic I was covering. The golden rule is to always unsubscribe if you subscribe. So 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 the video to keep it shorter/more focused. But if you look at the sample code (referenced in the video notes), you'll see that I use takeUntilDestroyed. But since I have the code in a method (not a constructor), I have to use DestroyRef. 😊 You're the second person that's pointed this out, so I'll add the above to the video notes. Thanks for watching!

[@timeimp]

@@deborah_kurata Excellent points all round! Please keep the ⭐️⭐️⭐️⭐️⭐️ content coming!

[@jonathancastells243]

Thanks for sharing! you're the best! would like to know if the effect opens a new subscription every time the selectedMemberId changes, are the subscriptions closed at any point?

[@deborah_kurata]

Thank you! Yes, it re-subscribes every time the selectMemberId changes. The http request is "one and done", so the subscription is complete each time after the data is returned. And yes, I should have shown the unsubscribe using takeUntilDestroyed. I removed it at the last moment because the video was getting long and I didn't want to distract from the key point of the video. I did include it in the sample code here: stackblitz.com/~/edit/sync-select-effect-deborahk

[@abdelkrimhaddadi5098]

Hello Deborah and thanks for videos 😊. Just a question, do we need to add the untracked() function around the todos signal ? In order to avoid a potential infinite loop in the future ? Thanks 🙏🏼

[@deborah_kurata]

Thank you! That's a good question. I know untracked() is useful when reading a signal to prevent tracking it as a dependency. I'm unclear about its usefulness when setting a signal. I'll need to research that. And maybe it will lead to another YT video? 😊

[@abdelkrimhaddadi5098]

Yes with please, it could be a good idea to have a dedicated YT video for that. Otherwise you are right, Angular track a signal only when you access to read its value. So in this case everything is ok 👌 thanks again for your video

[@AnthonyDev]

Thanks again, my teacher! Any chance to get a series on NgRx Signals? 🥰

[@deborah_kurata]

I'm considering doing something on SignalStore. It's on my list. 😊

[@AnthonyDev]

@@deborah_kurata whatever is on that list, I know it will be great content. 😎

[@deborah_kurata]

@@AnthonyDev That put a smile on my face! Thank you!

[@andar_]

For me, it's not completely clear how the effect works. Does it trigger every time any of the signals are updated? In that case, if errorMessage updates, the function inside the effect will run as well, right?

[@deborah_kurata]

Yes, it will trigger every time any of the signals are updated ... unless you use untracked. I've planned to do a video on untracked, but haven't gotten it finished yet. Here us an article that may be useful: blog.angulartraining.com/whats-the-untracked-function-angular-signals-c08d28b92d57

[@codeSurvivor]

Nice video, so much easier to code this with signals an effects, thanks! I really like this clean examples but when developing an app for a customer they usually want a more robust UX that gives feedback to the user of what's going on, like, for example, showing a spinner on the 2nd select box or a small message while loading.. Or differentiating if the second select box has no tasks defined for a member (empty array) VS. its initial value, or error recovery in case the api fails.. or many other, small things that makes the code grow uncontrollably if no specific pattern is used.. How do you recommend to approach these situations? I have been reading quite a lot on declarative programming patterns to deal with that, but it requires quite a lot of rxjs coding..

[@deborah_kurata]

Thank you! I show an example of loading indicator/error handling/other tasks in the video here: kzbin.info/www/bejne/qHm0kmeJpcqel6M Take a look and let me know if that is what you were looking for.

[@codeSurvivor]

@@deborah_kurata Hi, thanks for your answer. Yep, that definitely is what I meant: using a pattern that will ensure code extensibility and robustness. I guess that to be able to have these kind of patterns, some boilerplate and added complexity is the trade-off... I think that for tackling complex situations there's no way out of adding complexity in the code, and i'd really rather do it with a pattern that implies adding some boilerplate, than just adding more and more small code snippets here and there, making the component unmanageable. Thanks for your really great work, Deborah

[@dopeshots9687]

hey debi, one request. please write series of books covering advance angular, rxjs, signals, ngrx and all. It will be very informative and helpful for the comunity. Do consider if you may.

[@deborah_kurata]

That is very kind of you to suggest. 😊 I wrote several books on object-oriented programming back in the day. But these days, especially with Angular, things change so quickly it would be difficult to get a book written and published before it was out of date.

[@vic_shine]

❤❤❤

[@deborah_kurata]

😊😊😊