[Solved] Identify the error in this component code:data$ = of('Test');ngOnInit() { this.data$.subscribe(value => console.log(value));}Template:<div>{{ data$ | async }}</div> | Angular

Angular - RxJS and Observables Fundamentals

Identify the error in this component code:

data$ = of('Test');
ngOnInit() {
  this.data$.subscribe(value => console.log(value));
}

Template:

<div>{{ data$ | async }}</div>

ATemplate syntax is incorrect; async pipe needs parentheses

BAsync pipe cannot be used with Observables declared in ngOnInit

CManual subscription causes memory leak; async pipe already subscribes

DObservable must be converted to Promise for async pipe

Step-by-Step Solution

Solution:

Step 1: Analyze manual subscription
The component manually subscribes to data$ in ngOnInit, which is unnecessary if async pipe is used.
Step 2: Understand async pipe auto subscription
The async pipe automatically subscribes and unsubscribes, so manual subscription risks memory leaks.
Final Answer:
Manual subscription causes memory leak; async pipe already subscribes -> Option C
Quick Check:
Manual subscribe + async pipe = memory leak risk [OK]

Quick Trick: Avoid manual subscribe when using async pipe [OK]

Common Mistakes:

MISTAKES

Master "RxJS and Observables Fundamentals" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Identify the error in this component code: