No video :(

The problem with Angular Signals and Async Reactivity

Подписаться 5 тыс.

Просмотров 1,1 тыс.

50% 1

#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!

Опубликовано:

8 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 26

@flywheel56 3 месяца назад

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

@ZoaibKhan 3 месяца назад

You're welcome 🤗

@elsecoding8691 2 месяца назад

This is good stuff. Thanks for sharing 👍👍

@ZoaibKhan 2 месяца назад

My pleasure :)

@PatricioHondagneuRoig 3 месяца назад

Cool video, very informative take. Thanks for sharing!

@ZoaibKhan 3 месяца назад

Glad you found it useful! :)

@MichaelSmallDev 3 месяца назад

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 3 месяца назад

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 3 месяца назад

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

@rkrao8582 День назад

This is a good demonstration. I am a bit stuck on how to effectively handle errors from derivedFrom or derivedAsync. I used to have CatchError before with rxjs , now how to get the errors out of my API call using these new utilities? Bit confused

@ZoaibKhan День назад

One way would be to have a standard request response object with some flags like pending, completed and error and return that as part of the result you're getting. Then you can handle the error at the service level and return the relevant flags. In the component then you just have to listen to those flags and show error or success based on it.

@rkrao8582 День назад

@@ZoaibKhan ah! Got it, dug a little deeper into this in the past few hours and found "Eneas" explanation on how this can be done . Thanks

@ZoaibKhan День назад

@@rkrao8582 welcome. Do share Enea's link here for others as well. It's a good topic to discuss in a video as well

@rkrao8582 День назад

@@ZoaibKhan it was down somewhere on his Twitter feed but it was essentially looks like this section in NG extension derivedAsync "Contextual Observable Example" . I am not able to paste the links here in comments but that section gave me some ideas on how to handle errors however in my opinion there's gotta be a standalone section for error handling.

@KostasOreopoulos 2 месяца назад

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 2 месяца назад

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

@KostasOreopoulos 2 месяца назад

@@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 2 месяца назад

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

@NishvanthD 4 дня назад

what if there is a situation where this.bookId will be same but you have re-fetch data from api ,how to trigger the api

@ZoaibKhan 4 дня назад

Just creating a simple function will do the trick in this case. The bookIds current value can be used to send to the function and it will update the results.

@NishvanthD 4 дня назад

@@ZoaibKhan so I have api call in two different places and I need to set it to same signal in my case it is a read-only signal from toSignal

@ZoaibKhan 3 дня назад

Check out the video on explicit effect, you'll need to use a writable signal and update it using an effect in that case.