Angular unsubscribe, Angular async pipe, RxJS subscribe - Avoid Memory Leaks

[@MonsterlessonsAcademy]

WATCH NEXT: Angular Interview Questions and Answers - Dominate Your Next Interview - kzbin.info/www/bejne/a3LCin6ii7yAhtEsi=2DCn7yspEAAJ2H6l

[@luczztem]

broo the extended class approach is genius

[@MonsterlessonsAcademy]

Thank you!

[@programmistka_v_amerike]

Until for some reason we need to extend another class and TS doesn't support multiple inheritance. All the other solutions are indeed most used to avoid memory leakage. Also, multiple subscriptions can be also pushed to an array and looped through to unsubscribe from in the ngOnDestoy hook.

[@riketscience]

The last part at 09:12 is very nice indeed. I really like this kind of work. A great solution for many applications. Once again, great content my friend. 👍

[@MonsterlessonsAcademy]

Thank you very much!

[@chinmayapandya8990]

superb explanation of all possible ways of avoiding memory leaks for RxJS subscriptions. Thank you so much ! 🙂

[@MonsterlessonsAcademy]

You're welcome!

[@bizmarinainfo1808]

Excellent short and consolidated walkthrough. Thanks for posting.

[@MonsterlessonsAcademy]

Glad to hear that!

[@izacaqsha3480]

You are awesome sir, keep making videos like this !!! You are teaching a lot of newbies and experienced programmers!!

[@MonsterlessonsAcademy]

Thank you, I will

[@rizaanjappie]

This channel is underrated.

[@MonsterlessonsAcademy]

Thank you!

[@hamza201183]

High quality information as always. Many thanks Oleksandr!

[@MonsterlessonsAcademy]

My pleasure!

[@krzaqabc]

You provide very valuable content, thank you Olexander PS Olexander, consider creating new angular course but even more advanced than medium one - by saying more advanced i mean using bigger spectrum of RxJs operators, change detection strategy, NG rx, using facade pattern, and such tricks like this one with extending abstract class, strict mode, use of firebase? This is just my idea, but knowing your skills as a teacher and experienced developer it would be Very valuable and helpful for developers on any 'level', best regards and stay healthy!

[@MonsterlessonsAcademy]

Thank you for the idea. I will add it to the list of future courses!

[@kirole7381]

Best and straightforward...but i just see in my navbar one of your videos.. that async pipe is broken in Angular

[@MonsterlessonsAcademy]

Yes, you are right kzbin.info/www/bejne/kGq4amCMh7OSjrcsi=WUum9t-zTDwQ078W

[@austinZen8800]

Thanks!

[@MonsterlessonsAcademy]

Thank you so much for your support! It means a lot to me.

[@BennyS6502]

Nice video 👍 I would just like to mention that since version 16, Angular has introduced the "takeUntilDestroyed()" operator, which solves this problem. One question, why did you decorate the parent class "Unsub" with "@Injectable()"? In your example, it is not used as a service provided via dependency injection. Thanks!

[@MonsterlessonsAcademy]

I covered takeUntilDestroyed in a separate video kzbin.info/www/bejne/mpXcqX6qm7SAp7csi=i1RHZVQud8YKES4A Yes Unsub doesn't need injectable. It's just a habbit.

[@valikonen]

Amazing post. Maybe you'll make more with RxJS and also with complex Directives. Thank you!

[@MonsterlessonsAcademy]

Thank you for the idea!

[@transforgoku]

Excellent video, I think I'm gonna stick to async pipe and avoid suscriptions, Oninit and Ondestroy altogether in my code...

[@MonsterlessonsAcademy]

Yeap. Or look into Signals if you use Angular 16

[@lianayukhymchak5328]

Дякую! Дуже круте відео, все чітко і зрозуміло!) Thanks a lot!)

[@MonsterlessonsAcademy]

Glad to hear that!

[@fuji91]

Sorry for the dumb question, but what if I have: data$ = interval(1000); const x$ = this.data$.pipe(take(1)); x$.subscribe((data) => console.log('data', data)); Which of the observables does the take(1) operator specifically complete?

[@MonsterlessonsAcademy]

It's not dumb. x$ is a new observable based on data$. As you subscribe to x$ it has a take function

[@mirodz21]

amazing explanation. super helpful!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@leiayuri]

Hi, i find this approach very interesting also. DO you might wanna do a short video about that option too. takeUntilDestroyed with destroyRef which close "Automatically" the sub.

[@MonsterlessonsAcademy]

Hi, I already did that kzbin.info/www/bejne/mpXcqX6qm7SAp7csi=iAcYmh8rOUI-w6ZX

[@chagamajaykumarreddy1897]

amazing stuff, we need to call super right if we use this class as a common for all components ?

[@MonsterlessonsAcademy]

Yes of course

[@chagamajaykumarreddy1897]

Is this possible way of avoiding super inside constructor

[@MonsterlessonsAcademy]

@@chagamajaykumarreddy1897 no, it's how prototypes are working in js

[@its_vincesanity]

This is pretty awesome! Love that's it's so easy to implement but so valuable. Thanks!

[@MonsterlessonsAcademy]

Glad you like it!

[@tarasshevchuk8477]

Thank you ! Very useful information !

[@MonsterlessonsAcademy]

You are welcome!

[@danilo_teixeira]

Very nice video man, congrats! Could you make a video talking about the new operator released in Angular 16, the "takeUntilDestroyed()"

[@MonsterlessonsAcademy]

Where did you find such method. Can you give a link?

[@mrlindaring]

Brilliant! Thank you.

[@MonsterlessonsAcademy]

You're very welcome!

[@dhmilmile1]

What should we do if we need ngOnDestory in the child component or how we can override it?

[@MonsterlessonsAcademy]

override it an call super

[@ArthunMorgan747]

Hi, can you tell us which IDE you are using? :)

[@MonsterlessonsAcademy]

It's Vim

[@ArthunMorgan747]

@@MonsterlessonsAcademy Okie I am little confused as I am learning angular,should I use vscode or vim? I know it is just IDE but still which has better support?

[@MonsterlessonsAcademy]

@@ArthunMorgan747 You should use vscode and focus on learning programming and not configuring the editor which with vim will take a lot of time.

[@ArthunMorgan747]

@@MonsterlessonsAcademy thank you 😁

[@msiyam]

Many Many Thanks to you sir, You make my day

[@MonsterlessonsAcademy]

It's my pleasure

[@ugochukwuumerie6378]

Legend! Thanks for the awesome content especially the custom takeUntil(), pretty useful

[@MonsterlessonsAcademy]

Glad you like them!

[@serhiitachuk]

Hello! I love your video so much. Where is the best place to support you? On your platform or udemy (as far as I know udemy takes some commission)?

[@MonsterlessonsAcademy]

Comission is everywhere -_-. Buying my courses or subscription on the website has the smallest comission and gives you knowledge in return. monsterlessons-academy.com/courses If you don't need a course but just want to support me there is a membership on youtube channel.

[@austinZen8800]

you'll need a super() call in the component's constructor using / extending this class, otherwise TS will complain?

[@MonsterlessonsAcademy]

You are totally right. If you need to do anything in contructor you must call super.

[@ndthinh91]

Thank for your awesome content

[@MonsterlessonsAcademy]

Glad you like it!

[@VasyaFF]

Is it correct that we should use ReplaySubject, NOT Subject for unsubscription? After component destroyed it is possible that Subject is destroyed too, but subscription NOT. And subscription survive after destroy. But ReplaySubject can "shot" one more time after component destroy and subscription will be completed.

[@MonsterlessonsAcademy]

You can but there is no memory leak is subscribes if you use takeUntil or unsubscribe. Doesn't matter if it is subject, behaivourSubject or replaySubject.

[@ali.shahnawaz]

Awesome content on unsubscribe

[@MonsterlessonsAcademy]

Happy to hear that!

[@LailahaillallahTv]

how would you call abstract unsub class while your component already extends other class? in typescript you cant extend two class. do you have any thoughts about that?

[@MonsterlessonsAcademy]

You can't do that. Extend approach is not that popular in Angular at all. Typically you just inject services and use them.

[@imriharlev5151]

Thank you for the good content 🤩

[@MonsterlessonsAcademy]

Glad you enjoy it!

[@rohit36910]

Should i unsubscribe route change as well

[@MonsterlessonsAcademy]

Angular does it for us but I prefer to just unsub for every subscribe I see

[@roman-tp6sd]

You re the best! Tnxx!

[@MonsterlessonsAcademy]

Thank you!

[@rohit36910]

Premium content, useful information. Thank you

[@MonsterlessonsAcademy]

Glad it was helpful!

[@sergiocebrian85]

I still remember several projects where the people forgot to close subscriptions...

[@MonsterlessonsAcademy]

Yeap. Happens all the time.

[@letok2871]

Крутотень)

[@RayZde]

why don't we just use a promise for queries? this sounds like a potential problem in your app to troubleshoot.

[@MonsterlessonsAcademy]

It's architecture of Angular team. I didn't have any problems or need to use promises in Angular.

[@space-waves]

Wait what? I was sure the component is destroy when not in the view anymore and by consequence all subscribe are unsubscribed…

[@MonsterlessonsAcademy]

Destroying doesn't have anything to do with the in view or not. Also you need to unsubscribe manually.

[@lindermannla]

Monster! 😂

[@iukys3889]

I don’t feel like the video is useful at all, this can be found in angular doc and this is far from real life situation (interval really ? ..)

[@MonsterlessonsAcademy]

It's the example to see that stream was canceled.

[@mkrzyzowski]

Last one approach is nice but it does not allow to use "ngOnDestroy" in the "Postscomponent" as it is already declared in "Unsub".

[@mkrzyzowski]

but we can add "public unsubscribe(): void {" in "Unsub" and call it from "public override ngOnDestroy() {", "this.unsubscribe();" to solve it.

[@MonsterlessonsAcademy]

exactly