The problem with Angular Signals and Async Reactivity

#angular #signals #rxjs
💖 The complete app I was building can be found on my shop
buymeacoffee.com/zoaibkhan/e/...
📽️ My courses:
zoaibkhan.com/courses
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
In this video, I discuss a problem I got with implementing a very common front-end problem using the Signals API in Angular. And the best way to resolve it!
Socials:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
00:00 Introduction to Angular's Signals API Challenge
00:25 Exploring the Initial Approach with ngOnInit
02:10 Addressing Reactivity with Effects Primitive
04:25 Switching to RxJS for Enhanced Reactivity
06:36 Optimizing with Observable to Signal Conversion
08:54 Introducing Derived Async for Simplified Implementation
10:43 Conclusion and Final Thoughts
Cheers!

[@elsecoding8691]

This is good stuff. Thanks for sharing 👍👍

[@ZoaibKhan]

My pleasure :)

[@flywheel56]

Pertinent, useful, and very up to date info on the new way of working with Angular. Thanks.

[@ZoaibKhan]

You're welcome 🤗

[@PatricioHondagneuRoig]

Cool video, very informative take. Thanks for sharing!

[@ZoaibKhan]

Glad you found it useful! :)

[@MichaelSmallDev]

I'm pretty sure some feature I wrote today would have been easier if I saw this first. I may just refactor it to be more like this video. Good stuff.

[@ZoaibKhan]

Glad to hear you found it useful! There's also the ngrx signals package and it's rxMethod function - that does the same thing in an RxJS way...

[@WeAreMuslim320]

Please also upload videos in urdu for better understanding thanks a lot.

[@KostasOreopoulos]

Or we can wrap the signal sets in an untracked scope I guess. But looking at the source code of derivedAsync, its very very clever.

[@ZoaibKhan]

Oh, I haven't looked at it in detail myself. Can you share some of the clever stuff there? :)

[@KostasOreopoulos]

@@ZoaibKhan It converts the promise if given to an observable, flattens it, uses DestroyRef, which I have never heard of to unsubscribe on destroy, peaks on the initial value in an untracked scope to avoid recursion, does the computation in an untracked scope, and gives back a computed signal based on the objeservable's next value. Its a little bit confusing because it tries to handle a lot of function signatures in the same function

[@ZoaibKhan]

@@KostasOreopoulos Wow, that's quite a lot! Respect for the maintainers increased even more :)

[@arpitgarg6459]

why can't we used computed in place of derviedAsync?

[@ZoaibKhan]

Because computeds are meant for sync reactivity, they can't have delays or promises or anything async in them.