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

If you write RxJS subscribe in Angular you by default have a memory leak. In order to avoid this you need to use Angular unsubscribe. Other way is to leverage Angular async pipe. We also will look on most production way to unsubscribe by using rxjs takeUntil.

MOST POPULAR COURSES

SERVICES THAT I'M USING

CONNECT WITH ME!

REFERENCES

TIMESTAMPS
0:00 RxJS subscribe
1:51 Angular Unsubscribe
3:35 Angular Async pipe
4:40 Take N RxJS
6:09 Take while RxJS
6:58 Take until RxJS
9:12 Custom take until

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[luczztem]

broo the extended class approach is genius

[chinmayapandya]

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

[bizmarinainfo]

Excellent short and consolidated walkthrough. Thanks for posting.

[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. 👍

[izacaqsha]

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

[hamza]

High quality information as always. Many thanks Oleksandr!

[kirole]

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

[valikonen]

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

[transforgoku]

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

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

[lianayukhymchak]

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

[its_vincesanity]

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

[msiyam]

Many Many Thanks to you sir, You make my day

[BennyS]

Nice video 👍

I would just like to mention that since version 16, Angular has introduced the "takeUntilDestroyed()" operator, which solves this problem.


Thanks!

[ugochukwuumerie]

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

[fuji]

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?

[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.

[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.

[danilo_teixeira]

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

[sergiocebrian]

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