Angular Signals or RxJS - They are not a replacement
ฝัง
- เผยแพร่เมื่อ 10 ก.ค. 2023
- Here we compare Angular Signals vs RxJS to show that you can't replace RxJS with Signals. This is not possible. Learn how to combine Angular Signals with RxJS to get the best results.
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...
What is it like to be soooo good at Angular? It must be wonderful.
Dunno. Nothing special. Just learned stuff through the years.
really nice video. a real world problem. different from that tutorials where you get lost thinking where you could use what you are learning and forget about everything because you can't relate. thanks!
Glad it was helpful!
Also I find that signals have totally different (more limited) use cases. Signal is essentially a value that incorporates change propagation, and as such it feels quite contrived to use them for streaming. You can use an effect() to implement reactive logic that executes for each new value, but that definitely doesn't seem semantic, plus you're forced to provide a starting value, and if that is null or undefined, then you end up having to declare the type as a union with null or undefined, which is again totally not what you'd want for a regular Subject fashion streaming.
Yeap, they are done more like a simple alternative to rxjs
Why would you not want to do that for Angular? We do it all the time in React
Hi Thank you very much, what about when we need to convere observables to signals and it is a form.valuechanges or a parent form.valueschanges knowing that we cannot use toSignal outside of a constructor and inside the constructor the form may not be initialized yet .
firstNameSignal = toSignal(this.profileForm.get('firstName').valueChanges, {initialValue: ''});
Love this thanks for the great content, as always!
Glad you enjoy it!
Async state with rxjs.
Sync state with signal.
I do not know what the advantage for convert this observable to signal from my side i think it is unnecessery to do that but could you explain the reason.
And you show very small example i want to ask how it would be if you want not just that but handle api failing to response with signal it will be a hell and that is why devs love angular and like this things just recently fixed with react-query.
The reason is that 100 functions from rxjs doesn't exist in signals. As I don't want to write them from scratch there is a possibility to convert.
If I have a list of articles (or todos) and I delete one of them (with http delete). How can I trigger an new fetch of the list of articles?
I still struggle with designing code with http calls and signals :(
I can reformulate my question in another way:
In your todo-list tutorial with signals, how do you incorporate and use http calls?
It doesn't change anything about API calls.
deleteArticle(id) {
this.http.delete(url + id).subscribe(() => {
const updatedArticles = this.articlesSig().filter(article => article.id !== id)
this.articlesSig.set(updatedArticles)
})
}
Kind of like this
@@MonsterlessonsAcademy Ok thank you very much! Finally your approach is what I ended up doing.
(I just used sig.update(...) instead of filter(...) then set(...)) but it's the same idea!
Great video, as always! 💪
I just have one Q: There's no need to manually unsubscribe?
This. It's clear as mud to me how angular cleans up the signal
This is the best answer. I will probably record Observables vs Signals video for better understanding.
what do you mean with digest cycle? From my understanding, signals prevent change detection across the whole app, instead it's more granular. Is this what you are referring to?
Also I bought your course on ngrx and angular and it is great!
Yes I mean change detection cycle. You've got it right. For some reason I used the term from AngularJS.
Glad you like my NgRX course!
This is a good example of how mixing signals and RxJS can work out. However, with an additional signal for the articles that is updated inside an async effect based on the search value you can achieve the same goal with just the signals API.
Sure
thanks for the clear explanations
Glad it was helpful!
Omg what theme is that?looks beautiful
It's Gruvbox
so why use here signals? we can use behaviour subject for same thing
I already covered that th-cam.com/video/RLoACfLYwPs/w-d-xo.htmlsi=jx-D8LSEUqTTv79c
impressive and real use case explained well
Glad to hear that!
can you pass signals as props?
I didn't try that yet but I don't see why not.
@@MonsterlessonsAcademy I passed them but they lose reactivity, I tried computed signals based on signal prop and they don't work
Thanks for the video
You are welcome!
Possible dumb question: why not just use rxjs in this case rather than converting between signals and rxjs obersvabless? Would it not be better to use subject?
Signal doesn't trigger full tree change detection mechanism but only the current component.
@@MonsterlessonsAcademy Ohh that makes sense thank you very much for the reply
One of the best content for angular developers🤜🤛
Glad to hear that!
Great video
Thanks
Alex, RXJS it's to big to be used just for http requests, Angular must use some native API from JS. RxJS will disappear!
Maybe. We'll see.
Rxjs will not disappear. It is too great by itself and doesn't require Angular. Angular should let go of Rx and build native http client requests.
Personally there is no "OR" i use both =D
Yeap
Debounce time, distinct until changed and switch map are the reasons rxjs sold so well. For all the rest rxjs is inferior to other options IMO, infact most people do lastValueFrom on http requests, this is a clear demonstration that async/await wins when it comes to http request handling. The command/query paradigm sucks, imperative is much better than declarative, because everybody understands the former, the only thing which goes well with declarative programming is UI (template stuff ngIfs etc).
Thank you for sharing your opinion!
"Imperative is better than declarative". I've used both and declarative is far, far superior for complex components.
Title is totally misleading.
Where is it misleading?
@@MonsterlessonsAcademy you haven’t done a comparison of case when rxjs and when observables. Title makes you think that you can see one or the other, while would have been really nice to highlight each one’s advantages.
@@Storiada Use signals everywhere and use rxjs when you can't solve your problem with signals.
@@MonsterlessonsAcademy not sure about your reply to my comment.
I was just highlighting that the title suggest a comparison video between then.
While, the truth is... you are combining them.
By end it's Rxjs AND Signal, and not Rxjs OR Signals.
Nevertheless, good example in how to use them together.