Every Angular developer eventually faces the dilemma: How do I get my data out of the Observable?
There are two correct answers, and they serve different purposes. Let's look at the code for both.
Scenario 1: Pure Display (The Happy Path)
If your data is just going onto the screen, use the Async Pipe. It is Declarative, meaning you describe what you want (the stream value), not how to get it.
The Code:
// component.ts
data$ = this.service.getData(); // No subscription here!
<p>{{ data$ | async }}</p>
Verdict: Use this 90% of the time. It prevents memory leaks automatically.
Scenario 2: Component Logic (The Necessary Evil)
Sometimes, the Async Pipe isn't enough. You might need to:
- Filter data based on local state.
- Trigger a side effect (like a Toast notification).
- Patch a Form Control value.
Here, you must subscribe. And to avoid Zombie Components (listeners that stay alive after the component dies), you need the takeUntil pattern.
The Code:
export class MyComponent implements OnDestroy {
private destroy$ = new Subject<void>();
ngOnInit(): void {
this.dataService.getData()
.pipe(takeUntil(this.destroy$)) // Use takeUntil with the destroy$ subject
.subscribe(response => {
this.data = response;
this.form.patchValue(response); // Specific logic!
});
}
ngOnDestroy(): void {
this.destroy$.next(); // Emit a value to signal completion
this.destroy$.complete(); // Complete the subject
}
}
Key Takeaway:
Don't be afraid of manual subscriptions, but respect them. They require explicit cleanup logic. If you can avoid them by using | async, do it. If not, use takeUntil.