Stop memory leaks in Angular

If you aren't careful with your component's subscriptions in Angular, its very easy to accidentally create a memory leak.

This video explains the most common cause of memory leaks I've seen across Angular apps: component and directives subscribing to events and observables that will live longer than the UI component. While Angular may believe it has destroyed a component, a live-alive subscription will keep a reference to it, keeping the component from being garbage collected.

The video covers 3 techniques to tear down these subscriptions:

* Unsubscribing
* Async Pipe - https://angular.io/api/common/AsyncPipe
* takeUntil() operator - https://rxjs.dev/api/operators/takeUntil

0:00 - Intro
0:27 - Memory leaks
1:15 - Example bug
1:35 - Why the bug causes a memory leak
2:14 - Fix 1: Unsubscribe
2:27 - Fix 2: Use async pipe
2:37 - Fix 3: Use takeUntil()
3:08 - What to watch out for

• #science_technology
• #angular
• #memory_leak
• #rxjs
• #observables
• #takeuntil
• #async_pipe