From community: There is an eslint rule that helps to avoid the pitfalls I mentioned - github.com/cartant/rxjs-tslint-rules#rxjs-no-unsafe-takeuntil 💥 Become a PRO with my in-depth Angular Forms Course💥 🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-discounted 💡 Short Frontend Snacks (Tips) every week here: Twitter - twitter.com/DecodedFrontend Instagram - instagram.com/decodedfrontend LinkedIn - www.linkedin.com/in/dmezhenskyi
I love how you explain things while showing the actual implementation in the Angular source code. I am glad you have decided to create Angular content :)
Thanks Sir, always learning something new here, nice and clean!!! Do you have some videos talking about the best way to structure a complex Angular project? When to use container components, presentational components pattern, use of a state management with the use of a facade service, maybe some NX style project structure also? I always find it hard to find ressource about it except having the ability to have access to a large production app. Anyway all the best, Thanks you!
Thank you very much for this one! 1h ago was googling is switchMap auto unsubscribed when have takeUntil and now you posted this 😂 Great explanation! 🎉
Could you expound on how you see the memory leak? Or are you determining this because you still see the polling logs in the console? The bird was exceptionally funny!
Yeah, async pipe is a decent way of unsubscribing, but still - it has this awful thing to it that the first "emission" is null, so it requires a lot of guards around the values to satisfy strict template checks
Eventually, all the approaches have tradeoffs. I forgot to mention in the video but the toSignal also has some drawbacks, for example, since it uses inject() under the hood, it means that you can use it only either in the constructor context, the context of injector, or provide injector explicitly :)
@@DecodedFrontend Yes, Manfred had a great talk about it recently. But I am not reaching that far, as my projects are still pre-16. And also, singal won't be able to replace all rxjs, so one still needs to know the "old school" ways :)
4:00 Your assumption is wrong, you can perfectly declare takeUntil operator after min, max, count, last. Here is an example which doesn't print anything due to the takeUntil method : const subject = new Subject(); setTimeout(() => subject.next(null), 500); of(1, 2) .pipe( concatMap((n) => of(n).pipe(delay(1000))), last(), takeUntil(subject) ) .subscribe(console.log);
@@DecodedFrontend for example 2:54 - it would be cool to put this example in stackblitz so I (we) can play with this code :) Or maybe I'm the one who want to test it by myself :D
Very strange behavior. May be issue was with PollingService instances? Because, usually SwitchMap of course is auto unsubscribing if parent subscription was canceled, even if takeUntill stands before switchMap operator.
Fantastic video 😍😍 Have a doubt.. I have a project with hundreds of components, and each component can have its own service. These services handle the business logic for fetching data from the backend. The response from the API calls is then shared with the component's template and rendered on the UI. I would like to know if unsubscribing from API call responses made using the Angular HTTP module is necessary in this scenario. btw I am not using async pipe.
Amazing video thank you so much, I've been using takeUntil(destroyed$) opreator and never felt that there might be memory leaks I thought it was doing great job. nice video I think you saved so much person's time. keep going ❤
Nice video. However I don't quite see how toSignal avoids one of the pitfalls you mention in ruclips.net/video/eJs4EJUOnNE/видео.html. AFAIK toSignal needs to either run in injection context or you need to manually pass it the Injector, so how could you leverage this in a method, for instance?
Hi :) Yeah... well... I was already getting this question and it is my bad that I forgot to mention about disadvantages of using toSignal as well. Indeed, it has a limitation that you have mentioned which might be very inconvenient when you observable rely on some data from e.g. @Input(). My motivation to claim that 'toSignal' is better than the async pipe was the following: 1. No need to import any dependencies like (AsyncPipe) 2. Broader usage. It can be used in services, directives, etc when async pipe can be used only in components/templates. 3. Compatible with the future ZoneLess concept which is based on signals. Maybe the ASYNC pipe will be adjusted to work with Zoneless apps too but at this time I don't have such information. But of course, toSignal has disadvantages like: 1. can be used only in the injection/constructror context. 2. toSignal subscribes immediately to observable which is... not necessarily a disadvantage but just a thing to keep in mind.
From community: There is an eslint rule that helps to avoid the pitfalls I mentioned - github.com/cartant/rxjs-tslint-rules#rxjs-no-unsafe-takeuntil
💥 Become a PRO with my in-depth Angular Forms Course💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-discounted
💡 Short Frontend Snacks (Tips) every week here:
Twitter - twitter.com/DecodedFrontend
Instagram - instagram.com/decodedfrontend
LinkedIn - www.linkedin.com/in/dmezhenskyi
I love how you explain things while showing the actual implementation in the Angular source code. I am glad you have decided to create Angular content :)
Thanks for this one. Really educational and you just answered an issue I once had last month.
Thank you for your feedback. I wish I released the video earlier :) However, it will help others to save a lot time of in debugging such stuff.
The presentation of the memory leak is awesome! Thank you for the video
Thanks Sir, always learning something new here, nice and clean!!! Do you have some videos talking about the best way to structure a complex Angular project? When to use container components, presentational components pattern, use of a state management with the use of a facade service, maybe some NX style project structure also? I always find it hard to find ressource about it except having the ability to have access to a large production app. Anyway all the best, Thanks you!
Thank you very much for this one! 1h ago was googling is switchMap auto unsubscribed when have takeUntil and now you posted this 😂 Great explanation! 🎉
You are welcome :) Thanks for your feedback!
“ but is there a even a better way?” I truly thought that you will say “no”))) thank you for the video
How unpredictable am I haha 😂 thanks for the comment 😊
Thanks! You boosted my angular knowledge dramatically 😅
As always, valuable content. Thanks for sharing!
Incredibly valuable information. Thank you for keeping the video under 15 minutes.
I love the way you explain things! greetings for Colombia!
As always, clear explanations 😊 thanks!
Now this is high quality angular's content.
As always awesome information!!
Could you expound on how you see the memory leak? Or are you determining this because you still see the polling logs in the console? The bird was exceptionally funny!
Thanks for another useful video, Dmytro) What about until-destroy Library?
Same thing there :) They also use takeUntil operator under the hood.
i look forrward to seeing a singal video on DECODED FRONTEND style, i mean, master style
Yeah, async pipe is a decent way of unsubscribing, but still - it has this awful thing to it that the first "emission" is null, so it requires a lot of guards around the values to satisfy strict template checks
Eventually, all the approaches have tradeoffs. I forgot to mention in the video but the toSignal also has some drawbacks, for example, since it uses inject() under the hood, it means that you can use it only either in the constructor context, the context of injector, or provide injector explicitly :)
@@DecodedFrontend Yes, Manfred had a great talk about it recently. But I am not reaching that far, as my projects are still pre-16. And also, singal won't be able to replace all rxjs, so one still needs to know the "old school" ways :)
4:00 Your assumption is wrong, you can perfectly declare takeUntil operator after min, max, count, last.
Here is an example which doesn't print anything due to the takeUntil method :
const subject = new Subject();
setTimeout(() => subject.next(null), 500);
of(1, 2)
.pipe(
concatMap((n) => of(n).pipe(delay(1000))),
last(),
takeUntil(subject)
)
.subscribe(console.log);
Thanks very useful!!
Great Channel for Angular Content. Do you have any plans to cover "Directive Composition API"?. Thanks in advance.
there is a typo in your video thumbnail
Oh, indeed. Thank you, I will fix it :)
Awesome thanks!
Як завжди🔥
What Happens with CatchError inside the pipeline? Should I use takeUntilDestroyed before the CatchError or after?
Great as always. Please consider putting code example next time! Cheers :)
Hey :) thank you! Could you please clarify what exactly do you mean by “putting code examples”? Thank you :)
@@DecodedFrontend for example 2:54 - it would be cool to put this example in stackblitz so I (we) can play with this code :) Or maybe I'm the one who want to test it by myself :D
@@michaldevpl aha, that's what you mean. Ok, I will maybe add either a Stackblitz or a link to the GitHub repo ;)
@@DecodedFrontend No worries :) Just consider it during next video! Happy weekend!
thank you so much for your videos, it feels like they make me a better and more undarstanding software developer :)
Great as always thank you
What order should `catchError` and `finalize` operators be used vs `takeUntil`?
With takeuntilDestroyed, i am getting the issue
NG0911: View has already been destroyed
Is there any Solution for that?
Very strange behavior. May be issue was with PollingService instances? Because, usually SwitchMap of course is auto unsubscribing if parent subscription was canceled, even if takeUntill stands before switchMap operator.
Great video. Thank you. You made me laugh with parrot 😄
Fantastic video 😍😍
Have a doubt..
I have a project with hundreds of components, and each component can have its own service. These services handle the business logic for fetching data from the backend. The response from the API calls is then shared with the component's template and rendered on the UI. I would like to know if unsubscribing from API call responses made using the Angular HTTP module is necessary in this scenario.
btw I am not using async pipe.
I have a question regarding the valueChanges of the form. Do I need to unsubscribe from it?
Thank you.
Thank you, for your videos!
Thanks!
Thanks for the content (useful as usual) :)
do you have a video on when the ngOnDestroy method is automatically called in services and when it will be ignored?
Great video. Thanks :)
Perfect, thanks
I really appreciate of y for create nice video
bro please make videos more frequently. please. you tell what others donot and very few videos there. :(
For operators such as share or shareReplay, should they go after takeUntil or similar methods?
thank you
i think the best way is takeUntilDestroyed
Great option too :)
@@DecodedFrontend toSignal is too new
@@ratg97 yep, that’s true. Hopefully, since Angular 17 it becomes stable and we can safely use it.
what happened after takeUntil stays after takeuntil
Amazing video thank you so much, I've been using takeUntil(destroyed$) opreator and never felt that there might be memory leaks I thought it was doing great job. nice video I think you saved so much person's time. keep going ❤
Nice video. However I don't quite see how toSignal avoids one of the pitfalls you mention in ruclips.net/video/eJs4EJUOnNE/видео.html. AFAIK toSignal needs to either run in injection context or you need to manually pass it the Injector, so how could you leverage this in a method, for instance?
Hi :) Yeah... well... I was already getting this question and it is my bad that I forgot to mention about disadvantages of using toSignal as well. Indeed, it has a limitation that you have mentioned which might be very inconvenient when you observable rely on some data from e.g. @Input(). My motivation to claim that 'toSignal' is better than the async pipe was the following:
1. No need to import any dependencies like (AsyncPipe)
2. Broader usage. It can be used in services, directives, etc when async pipe can be used only in components/templates.
3. Compatible with the future ZoneLess concept which is based on signals. Maybe the ASYNC pipe will be adjusted to work with Zoneless apps too but at this time I don't have such information.
But of course, toSignal has disadvantages like:
1. can be used only in the injection/constructror context.
2. toSignal subscribes immediately to observable which is... not necessarily a disadvantage but just a thing to keep in mind.
*I really appreciate of y for create nice video *
Сигналы имба)
one more new thing in arsenal) thx a lot
I unsubscribe by clicking the small unsubscribe button in my emails 😂
Or on RUclips channel 😬 Hopefully not :)
@@DecodedFrontend haha, no I have subscribed to you, good content
I subscribed your channel and then after watching this video unsubscribed as you suggested to avoid memory leaks 😂😜
It's 1st what you must learn before use RxJs!
Signals for lazy developers )))
Signals for cowards!😅
Wtf? 😂
thank you!